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Preface 



Blogger offers us the ability to change our default templates. By uploading a new 
template or customizing your existing template, you can create a design more suitable 
for your blogging needs. 

T his eBook offers practical advice for your Blogger template requirements. From 
choosing a third party template through to customizing an existing design and 
beyond, this eBook is intended to help you make the most of your template and build 
a better blog with Google's Blogger platform. 

An overview of chapters 

Chapter One explains why you should use a non-standard template for your blog, providing 
an introduction to third party templates and customizing your existing blog design. 

Chapter Two will draw your attention to the different styles of layout and design. Here you 
will find inspiration and examples of free Blogger templates which you can download for use 
in your own projects. 

Chapter Three explains the basic process of uploading a new Blogger template, with clear 
instructions and troubleshooting tips. 

Chapter Four offers an advanced method of uploading a new template, which enables you 
to retain important widgets from your current design. 

Chapter Five provides useful tutorials for basic customizations of your Blogger template, 
which are useful adaptations for both third party and existing template designs. 

Chapter Six will help you understand how fast your blog loads and offers useful tips to help 
your blog load more quickly. 

Chapter Seven covers methods of optimizing your blog template for search engines which 
enables search engine spiders to index your blog content more efficiently. 
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Chapter Eight provides links and resources to take your Blogger template design to the 
next level. 


Who is this eBook for? 

This eBook is written for those using the current Google Blogger platform who would like to 
use a new Blogger template or customize their existing design. 

The code and examples provided in this eBook are primarily useful for those using the XML 
Layout template style, though many references are useful for those using Classic HTML 
based templates too. 

The methods used in this eBook do not require you to have any prior knowledge of HTML, 
CSS, XML or related technologies; instead, everything you need to know is covered in the 
relevant chapter or section. You can also find useful information for technical terms covered 
in the glossary. 

Conventions 

In this eBook, I have used different styles of formatting to draw your attention to code and 
other important statements. 

Important words and statements are highlighted in bold text to help them stand out from 
other elements on the page. 

Hyperlinks appear like this in the body of text and are clickable. This means you can visit 
the page referenced directly from this PDF document. 

When explaining how to perform a function within your Blogger dashboard, I will reference 
the page like this: 

Layout>Page Elements 

This means you should click on the Layout tab while logged into your blog, then on the 
Page Elements link on the layout page as in Figures 1 and 2: 



Create Edit Post-; Moderate Comments 


Figure 1 : 

Click on the Layout tab first... 

S My Test Blog 

... tkei-v. cltcte the 
edit html itiMe 

I” Posting Settings Layout 

View Bloa 


Page Elements Fonts and Colors 

Edit HTML Pick New Template 


Figure 2: Then click the Edit HTML link on this page 
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Code Examples 

Sections of code will appear in three different ways. When pointing out a section of code 
within a sentence, the code will be formatted like this: 

Here is a layout tag: <data : post . body/> This tag is used for the main post content. 
Larger sections of code will appear like this: 

<b:if cond=' data: blog. pageType == Squot; index&quot; '> 

<title><data : blog . title/></ title> 

<b:else/> 

<title><data : blog . pageName/x/ title> 

</b:if> 

When I need to draw your attention to a particular line in a section of code, this will be 
highlighted in bold red, like this: 

<b:if cond= ' data : blog . pageType == &quot; index&quot; ' > 

<titleXdata : blog . title/x/title> 

<b:else/> 

<titlexdata : blog . pageName/x/ title> 

</b:if> 


Notes and ideas 

At several points throughout this eBook, I will draw your attention to notes and ideas. 

& 


Notes will appear like this in the page. These notes offer important information 
regarding the content presented on that page. 


In contrast... 



Ideas will appear like this. These sections offer ideas or other useful information 
about the content on that page. 


Questions and Feedback 

If you have any questions about this eBook, you can contact me by email at 
amanda@bloggerbuster.com and I will do by best to get back to you as soon as possible. 
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I also appreciate any feedback offered about this eBook and suggestions for future 
publications which can be distributed by Blogger Buster. 

For more information about using Blogger, please browse my main website: 
www.BloggerBuster.com or participate in the Blogger Buster Forums . 
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Why use a non-standard template? 

Blogger provides over 20 default templates, allowing swap between default designs at 
the click of a button. So why would you want to use a non-standard design? 

O ne of the best features of Blogger's free platform is that we can change our blog 
templates at will, either by using a brand new template or by customizing the 
existing template code. With so many different designs to download from Blogger 
template providers, and infinite possibilities when customizing our own templates, why settle 
for a standard design? 

Stand out from the crowds! 

There are millions of Blogger users from all corners of the globe, and only 27 standard 
Blogger templates to choose from. If you are using a standard template, you can be sure 
that thousands of other bloggers will be using this same template too. 

Your blog design is the first thing a visitor sees when they land on your blog pages. If you 
use a standard template, there is little visual appeal which will make your blog memorable. 

By choosing to use a non-standard template (or customizing your existing template), you 
are assured that far fewer people will be using the same design as you. 

If you also decide to customize your design with your own blog branding, your template will 
be as unique as you are! 


Ensure your template matches the style of your blog 

Blogger's default templates are generic: their design was created to be fitting for any style of 
content. 



Wouldn't you feel better about your blog's design if the style was more fitting to 
your blog's content, style and personality? 
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Using a brand new, non-standard template offers you the choice of styling your blog's 
design to match the style of your blog quickly and easily. 

There are literally hundreds of "third party" designs to choose from; with such a huge variety 
on offer, you're sure to find something which matches the style of your blog and personality. 

If you prefer to customize your existing template, there are many simple yet effective 
techniques you could use to change the overall appearance of your blog in just a few steps. 
Using a different color scheme, background, font styles and adding a custom logo to the 
header section can totally transform a generic template into something unique and 
interesting. 


New Templates offer better functionality! 

Navigation bars, space dedicated to ads and dual sidebars are features which are not 
present in Blogger's default designs. These features are included in many third-party 
templates, or can be added manually by customizing your existing design. 

Visitor experience is crucial to the success of any blog or website. If your template is 
easy to navigate; help readers find the content they like to read, and is aesthetically 
pleasing, you're one step closer to building a solid reader base. 

Chapter Summary 

In this short chapter, we've explored some of the reasons why you would prefer to use a 
customized or third party template for your blog. 

Now we need to learn more about blog design trends and the availability of third party 
templates: 

• Which style of layout would work best for your blog? 

• What would be the ideal design style for your blog? 

• Which styles of template are commonly used in Blogger blogs? 

• Where can I find free third party templates to download? 

We will answer these questions in the next chapter, which will provide you some design 
inspiration and links to free Blogger themes. 
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Template layouts and design styles 


With hundreds of Blogger templates to choose from, how can you decide on the best 
design for you? In this chapter, we'll look at some different styles of layout and design 
trends for Blogger templates and how they are used effectively for different types of 
blogs. 

F inding or creating a template to match the style and theme of your blog is an 

important step towards building a great blog design. It's essential that the overall 
design of your blog reflects and complements the content. This reinforces a sense of 
trust in your readers for the content you have to offer them. 

The layout style of your blog should be an important consideration. There are different 
styles of template to consider depending on the content you post, whether you intend to 
monetize your blog with ads, and how much miscellaneous content you need to display 
outside the normal post area. 

Furthermore, different design styles are appropriate for different niche subjects and types of 
blog. A business blog, for example, would not appear so professional if presented with an 
extravagant, floral theme! 


§ 


Think about the design of the blogs you visit most. What aspects of the design 
attract you? More importantly, how does the overall design and layout 
complement the content presented in these blogs? 


In this chapter, we'll look at different styles of layout and overall design, with examples of 
existing templates which are available for free download. 

Blog Layout Styles 

Blogger's default templates feature the classic style of blog layout: 

• An overall width of 800px or less, optimized for small screen sizes 

• A fixed width layout (with the exception of ?? which is a fluid template designed to fit 
any size of screen) 
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• A simple two column layout with one sidebar 

• A wide header which spans the width of both columns 

In contrast, modern blog templates feature a range of different layout styles with more 
than one sidebar, an interactive header area and generally wider blog width to 
accommodate the trend in increased screen resolutions. 

Let's take a look at some of these layout styles in more detail. 


How many columns? One, Two Three or More? 

Blog templates usually feature a main posts column and one or more sidebars (totalling at 
least two columns). 

Recent shifts in web design trends have resulted in the availability of more complex layout 
styles, ranging from a single column to three or more columns and even magazine styles! 

These different layout styles may be adapted to complement the theme and content of 
different blog types. 


Single column layouts 


Single column layouts include only the main posts column and do not have a regular 
sidebar. Many single column layouts will feature a multi-column footer beneath the main 
post column or above the posts, where navigation and other miscellaneous content can be 
placed. 


Header seat ion 


Posts 

Colu.rn.iA, 


Footer section 


Coll/OWIA. 

OM. 


C-oLkhua. 

TWO 


Colwmi/v 

Three 





Figure 3: Example layout of a single column blog 
template 


Blog templates with a single column layout are an excellent choice for photobloggers, 
designers and other writers who showcase imagery in their posts. This is because the 


4 


The Blogger Template Book 


single column structure draws visitor focus on the content presented in this single column, 
while navigation and other non-essential content need not be immediately available. 

Here are a few examples of free single column Blogger templates for inspiration and 
download: 

Minimalista Negro by Binary Bonsai, converted by Blog and Web 

Demo | Download 




Acerca de esta plantilla 

Esta plantilla esta basada en “Greenery" de Binary Bonsai , 
licencia Creative Commons Attribution, Puedes utilizarla para f 
que respetes los creditos, regresando un link a BlogyWeb y 

Descargar plantilla 


idaptada para Blogger por BlogandWeb y esta bajo una 
nes personales o comerciales con la unica condision de 


o articulo "Como 


a pestana "Plantilla" o tambien 


Creadon de entradas 


T TT T 


Ed* .on do HTML 


siguiente codigoi 


*<='#•> BloyC/iM/li* 


En ese codigo, cambia los signos # por tus links y guarda. 
La plantilla tiene definidas algunas variables para cambiar I 


Nota: Esta plantilla s 


n Firefox, Opera, Safari e IE7 pero mal (para variar!!!) en los IE anteriores, 



Figure 4: Minimalista Negro by Binary Bonsai, converted by Blog and Web 


Ambiru by Gecko and Fly 

Demo | Download 
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MMfeuA j 


Amhin 

i - BTempktes 

BTemplates.com 

Home Blogger Template Blog Forum Gecko 8t Fly 



Lorem ipsum 

Saturday, March 8, 2008 


Lorem ipsum dolor sit amet, consectetur 

adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
I tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim 
|| veniam, quis nostrud exercitation ullamco 

List l: 

Lorem ipsum dolor 
sit amet 

consectetur adipisicing elit 
List 2: 

1, tempor 

2. incididunt 

Figure 5: Ambiru by Gecko and Fly 


Restoration by Frivolous Design 

Demo | Download 


RESTORATION 

BTemplates.com 


SATURDAY, MARCH 15. 2008 

Lorem ipsum 


Lorem ipsum dolor sit amet, consectetur 

adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco 

List 1: 

• Lorem ipsum dolor 
■ consectetur adipisicing elit 
List 2< 

1. tempor 

2. incididunt 

3. ut labore 

Posted by Francisco at 11 1 21 PM 0 comments 
Labels: Lorem 1, Lorem 2, Lorem 3 
Subscribe to: Posts (Atom) 


Figure 6: Restoration by Frivolous Design 


Two Column Layouts 

The two column layout is still a hugely popular layout style among bloggers. 
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Modern blog designs tend to feature a wide sidebar to the right of the main posts section. 
This allows room for wider ads and widgets in the sidebar, and also balances the layout 
against the wider style of main column. 


F [tad.tr sec.tt.piA- 


MflLlA, Ppsts 

sidebar 

Cplu.HA.lA, 


Fppter 



Figure 7: An example of a two column blog layout 


Two column template styles are suitable for most styles and subject matter. Here are some 
examples of free two column layouts (in varying styles) for inspiration and free download: 

Emire by Gecko and Fly, converted by BlogCrowds 

Demo | Download 


Emire 

A blog create to showcase the stunning blogger xml template Emire 


Home Blogcrowds Forum GeckoandFly email 


Emire 

■Id comments Monday, January 29, 2007 

This blog is created to showcase a stunning Blogger template, Emire 
designed by GeckoAndFly.com and converted to Blogger Beta by 
Blogcrowds.com. 

This template will be freely distributed at both GeckoAndFly.com and 
Blogcrowds.com, download the code here from our Template System, 
Please keep the credit to GeckoAndFly.com and Blogcrowds.com 
intact, for template support please visit Blogcrowds.com 

Distance Learning Online 

UK Universities, Study Online MBA, 

Degrees, HNC/D, browse courses 

Ads by Google 

Labels: emire 

Lorem Ipsum 
• 2 comments 

Suspendisse 
suscipit, pede 
eget tristique 
venenatis, 
pede eget 
tristique 
venenatis, 


Blogger Templates by GeckoandFly modified and converted to Blogger Beta by Blogcrowds 



Figure 8: Emire by Gecko and Fly, converted for beta by BlogCrowds 


Blogcrowds^ 


About Me 

BLOGCROWDS 

Visit Blogcrowds.com! 

VIEW MY COMPLETE PROFILE 

Blog Archive 

T 2007 (2) 

T January (2) 

Emire 

Lorem Ipsum 

Labels 

emire (2) 
lorem ipsum (1) 
test (1) 

Ads by Google QQ 

Kirona - Mobile 
Working 

Intelligent software 
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iWork by Jackbook 

Demo | Download 



SEARCH 


JACKBOOK.COM 


iWork 

Blog Description Goes Here! 


HTML2 - RECENT POSTS 

WE ARE MOVING!! 

Why a pool? 

3 Columns BloggerTemplate - Clean - 
Update (or New Version?) - Now, Fully 
Widgetized! 

BLOG ARCHIVE 


▼ 2008 ( 2 ) 

▼ January (2) 

Nicola Di Trento 
iWork BloggerTemplate 

CONTRIBUTORS 


Home About Contact 


Nicola Di Trento 

Written on 1 2:45 AM by JackBook.Com 

And who is Nicola Di Trento anyway? 

I have search this name on GOogle but still can't find any information about this name. 
This name is actually the original author of this theme, but seems I couldn't find any links 
reference to him. 


I wish I had the link about Nicola Di Trento, so I could give credit to him :) 


Thank Nicola, great work dude. 


Posted in Nicola Di Trento 1 4 comments | Links to this post 


Wow., that's beautiful Jack I said, and without any hesitant, I just began to convert it. and 
now, here it is. 


iWork Blogger Template 

Written on 9:24 PM by JackBook.Com 


I really need to convert a new blogger template. And luckily I saw this beautiful design. 
Called iWork Wordpress Theme. 


How do you think guys? Do you like it? you can download this 

JackBook.Com 


template there on 


HowTo Use Custom Domain On Blogspot- 
4 Steps + Screen Shot 


Introducing GIMME BLOG, Let's Build A Blog 
Network With Me 


Interview With Alborz Fallah Who Make 
Million Dollars With Blog In Just 2 Years 


Google + Digg = GDigg? 


Love. Me, Kiss.Me, Kill. Me 


Figure 9: iWork by Jackbook 


Natural Beauties by Aborregate 

Demo | Download 


natural beauties 


£7 


por aborregate 


inicio sobre blogger google soporte 


archivo del blog 

▼ 2008 (l) 

▼ marzo(i) 

Apple - Historia 

datos personales 

Aborregate 

Aqui veras mi perfil :P 

Ver todo mi perfil 


apple - historia 

Apple Inc. es una empresa estadounidense de tecnologia 
informatica. 

Fundada en 1976, tuvo un rol prominente en la revolucion 
informatica de los anos 70 con su computadora Apple II. Sus inicios 
son poco menos que curiosos, y for man parte del folclore 
informatico. Tanto Steve Jobs como Steve Wozniak eran dos grandes 
aficionados a la electronica en general y a la informatica en 
particular, en especial Wozniak. 

Este, desde pequeno, dedicaba sus ratos fibres a idear complejos 
circuitos electronicos para despues optimizarlos al maximo. De esta 
aficion, surgio su primera computadora, la Apple I, el cual fue 
presentado en la Homebrew Computer Club. 

Aunque para Wozniak la construccion de computadoras no era mas 
que un simple hobby, Jobs rapidamente vio la oportunidad de 
negocio, por lo que empezd a promocionar la computadora entre 
otros aficionados de la informatica del Homebrew Computer Club y 
otras tiendas de electronica digital. 

Publicado por Aborregate en 19:17 o comentarios 

Suscribirse a: Entradas (Atom) 


2008 Todos los derechos reservados 
Creada por Free CSS Templates | Plan . tillas blo gger por aborreg ate 


Figure 10: Natural Beauties by Aborregate 
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Three Column Layouts 

In the past couple of years, three column blog templates have become a common style of 
layout. Smashing Magazine estimates that over 50% of the world's top blogs use three (or 
more) columns in their blog layout. 

There are two main layout styles for three column templates: 

• A sidebar on either side of the main posts section 

• Two sidebars to the right of the main posts section 

Both sidebar styles offer extra space for navigation, ads and miscellaneous blog content 
which is required by large or professional blogs or those who have requirements for blog 
information. 


s>ldebars 


left 


and 


right 



Both 
sidebars, 
on the 
right 


Figure 1 1 : Two different formats of three column blog layouts 


Here are some examples of three column Blogger templates for inspiration and download: 

Sky 3C by BlogCrowds 

Demo | Download 
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BLOGCROWDS FORUM 


Labels 

lorem ipsum (1) 
sky3c (2) 
test (1) 

Ads by Google 

Backgrounds & 

Layouts 
Free Layouts, 
Backgrounds & 
Icons - Download 
Them For Free! 

Mysp a ce . Lay o utb a ckg rc 


Free domain and 

hosting 
3000MB 
Webspace with 
own website, 
domain & blog. 
Setup only £9 


Photo Gallery 

Templates 
AllWebCo Art and 


Sky3c 


Friday, February 2, 2007 

This blog is created to showcase sky3c 

templates modified and converted by Blogcroivds.com to Blogger 
XML. Check our links to view more Blogger XML Templates 

These template are available for download from at Blogcrowds.com 
Resource Section. Please keep the link and credits intact. 

Blogcrowds.com has the largest collection of Blogger XML templates 
including modified Blogger templates, Gecko & Fly templates, 
Wordpress templates, and more. 


Posted by Blogcrowds at 4:52 PM 3 comments 
Labels: sky3c 


Lorem Ipsum 

Suspendisse suscipit, pede eget tristique venenatis, pede egettristique 
venenatis, massa nisi ullamcorper elit, sed suscipit ligula dui eget est. 
Nunc suscipit nisi non sem. Pellentesque a mi eu leo lobortis volutpat. 
Donee tristique, lorem non vulputate consectetuer, sapien mi sodales 

Figure 12: Sky 3C by Blog Crowds 


Blogcrowds 

Visit 

Blogcrowds.com! 

View my complete 
profile 

Blog Archive 

T 2007 (2) 

V February (2) 

Sky3c 

Lorem Ipsum 

Blogger Templates 

Minima Black 
Snapshot Sable 
Minima Blue 
897 
Scribe 
Tic Tac 
Minima Ochre 
Denim Washed 
Thisaway Rose 
Herbert 


Gecko & Fly 



iTheme Techno by Jackbook 

Demo | Download 


iTheme Techno Blogger Template 


3 column (right sidebars), Mac OS interface design, drag & drop sidebar, beautiful mini icons 


O Home Contact Me 


Money making widgets Design Blogger Templates 

Choose your favourite products Design 1000s of Free Layouts & Backgrounds No 
shopping widget in 1 minute Sign Up. Download Free Layouts! 

< > Ads by Google 

■SS An ordered list 

24 ^ MagzNetwork © ordered list 5 comments 

Be A Kid Again 

1. Do a cartwheel. 

2. Sing into your hairbrush. 

3. Walk barefoot in wet grass. 

4. Play a song you like really loud, over and over. 

5. Dot all yourT's with smiley faces. 

6. Read the funnies. Throw the rest of the paper away. 

7. Dunkyour cookies. 

8. Play a game where you make up the rules as you go along. 

9. Step carefully over sidewalk cracks. 

1 0. Change into some play clothes. 

11. Tiy to get someone to trade you a better sandwich. 

1 2. Eat ice cream for breakfast. 

13. Kiss a frog, just in case. 

14. Blow the wrapper off a straw. 

1 5. Have someone read you a story. 

1 6. Find some pretty stones and save them. 

1 7. Wear your favorite shirt with you favorite pants even if they don't match. 

18. Take a running jump over a big puddle. 

19. Get someone to buy you something you really don't need. 



Figure 13: iTheme Techno by Jackbook 
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Embouteillage by Aborregate 

Demo | Download 


Embouteilllage 


Por aborreagate 

► INICIO ► SOBRE ► BLOGGER ► GOOGLE ► SOPORTE 

Lorem ipsum 

• Btogroll 

► Archivo del bbg 

Lorem ipsum an cum dolore mollis doctus, at antiopam inimicus vix. 

Google 

▼ 2008 (1 ) 

Integre percipitur eu pri. Mei vidit novum euripidis id, Nec dolores 

inimicus ne, diam vide regione at pri, te nullam accusata consetetur est. 

Vim te perpetua reformidans. Ullum epicuri mei id, ut earn facilisi 

Enchulatublog 

Aborregate 

V marzo (1) 

Lorem ipsum 

partiendo, ea per homero consequat. 

• Sobre mi 

• Dates personates 

Et nostrud delicatissimi mea, mea id alterum definiebas utlamcorper. 

Mea fugit tation definitionem eu, an mea nullam interpretaris, diceret 

graecis nostrum vis et. Ad denique deserunt necessitatibus sed, sit 

Aborregate 

Aqui veras mi perfil :P orrega e 

Aqui veras mi perfil :P 

Ver todo mi perfil 

Ver todo mi perfil 

sonet quando interesset ex, vel in liber nonummy, Sea commune 

maluisset voluptatibus in. In veri malis docendi pri, omnesque tincidunt 

assueverit te usu. Usu et diam ancillae mediocrem, prompta 

argumentum pri ea, quaeque dissentias eu per, Has ad nominavi 

ponderum accusamus, eu ullum volumus has. 



ft Publicado por Aborregate en 14:00 % 1 comentarios 

I Etiquetas: Lorem 1 . Lorem 2 




Figure 14: Embouteullage by Aborregate 


Magazine Style/Anti Layout 

An emerging trend of blog layouts is the magazine style (often referred to as “anti-layout”). 

This style features numerous columns, often with a different front page layout to individual 
post pages. It's well suited to news and technology blogs, or sites which require enhanced 
navigation options for readers to locate articles and content. 

At present, few Blogger templates are available to download which feature this style of 
layout, though I expect more will become available as this layout trend continues to grow. 

Here are a couple of magazine style templates for Blogger for inspiration and free 
download: 

Visionary Reloaded by Justin Tadlock, converted by Blogger Templates 

Demo | Download 
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Advertise Contact Links 

Visionary Reloaded l s ° a,cl '~ El 


Home About Example Example Example 


0 Subscribe by RSS l,_-< Subscribe by email 


Monday, June 30, 2008 Weather Live Web Cams Youtube Fav tab4 

Windows Could Use a Rush of Fresh Air 


Beginning as a thin veneer for older software code, 
it has become an obese monolith built on an ancient 
frame. Adding features, plugging security holes, 
fixing bugs, fixing the fixes that never worked 
properly, all while maintaining compatibility with 
older software and hardware - is there anything 
Windows doesn’t try to do? 

Painfully visible are the inherent design deficiencies 
of a foundation that was never intended to support 
such weight. Windows seems to move an inch for every time that Mac OS X or Linux 
laps it. 

The best solution to the multiple woes of Windows is starting over. Completely. Now. 




Read full story here 

Posted by T imethy Jones at 9 : 52 AM 1 comments 
Labels: news 


BLOGGER PLAY BLOGGER TEMPLATES 


Performancing Ads: The Ideal Ad 
Network 



Working LEGO Gun Will Make You Shoot Bricks 


LEGO 

tf&j V ADULTS 


One man's LEGO is another 
man's treasure, and what 
better way is there to guard 
your grand stash of colored 



How to install a custom blogger 
template 

Blogger Templates : Visionary 
Reloaded 

Blogger Template : Visionary 
Reloaded 


Figure 15: Visionary Reloaded by Justin Tadlock and Blogger Templates 



Magazine Style Template Red by Jackbook 

Demo | Download 


menu categories recent posts 


magazine style template - red 


A t /* t '.1 


* 


1 


/i 


WELCOME TO WORDPRESS TESTSITE 




Lorem ipsum dolor sit amet, consectetuer adipiscing | 
elit Quisque solllcitudin. Sed augue. Sed sagittis. 
Phasellus consequat venenatis lectus. Lorem Ipsum I 
dolor sit amet, consectetuer adipiscing elit. Quisque | 
sollicitudin. Sed augue. Sed sagittis. Phasellus 
consequat venenatis lectus. Read more 


''.L % 


WELCOME TO WORDPRESS TESTSITE 

Lorem ipsum lectus. Lorem ipsum 
dolor sit amet, consectetuer adipiscing 
elit. Quisque sollicitudin. Sed augue. 
Sed sagittis. Phasellus consequat 
venenatis lectus. Read more... 


■ HELP RESOURCES 


Help Center 
Help Group 
Blogger Status 
Known Issues 
Help Group 
Blogger Status 
Known Issues 


LOREM IPSUM 


Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 

Quisque sipiscing elit. Quisque 
sollicitudin. Sed augue. Sed sagittis. 
Phasellus consequat venenatis 
lectus. Read more... 


£ MONDAY. SEPTEMBER 03, 2007 BY JACKBOOK.COM 

Google are clearly gathering information about us but refuse to tell us why. It's nothing new to 
us, but while they cannot control normal SERPs, they do however control who is viewing what 
and when. 

We run Google adverts in order to survive. Does this mean we shouldn't share the information 
below? If you know an alternative way to sustain costs please get in touch. 

Please note, Google does not track you by simply viewing pages containing their adverts. 

1 . Google's immortal cookie: 

Google was the first search engine to use a cookie that expires in 2038. This was at a time 
when federal websites were prohibited from using persistent cookies altogether. Now it's 



Figure 16: Magazine Style Red by Jackbook 


ARCHIVES 

September 
July 
June 
August 
Home 
Contact Us 
About Us 
Full Rss Feed 

BLOGS OF NOTE 
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Choosing the ideal layout for your blog 

To help you discover the perfect layout style for your blog requirements, you should 
consider the following: 

• Do you want to display ads in your layout? 

• What forms of navigation and other non-post content do you need to display in your 
blog? 

• How much space is required to display non-post content? 

The style of layout you choose can depend on the space required of your non-post content. 
Many ads, navigation sections and other widgets are best contained in a wide two or three 
column template, while simpler blogs and photo archives look great when displayed in a 
simple single column design. 

Now that we've covered the main principles of blog layouts, let's move on to explore the 
more general appeal of blog design trends. 


Five major template design trends 

I've worked with many different styles and types of Blogger templates, and overall I would 
group these into five main design trends which can be adapted to different niche subjects 
and styles of blog content: 

1. Minimalist 

2. Dark 

3. Colorful/Ornamental 

4. Corporate 

5. Ad-optimized 

In the rest of this chapter, we'll explore each of these five styles and look at some free 
Blogger templates which you can download or use as inspiration for your own designs. 


Minimalist Designs: 

Minimalist templates are the easiest style of template to work with; they can be applied to 
any style of blog, content and niche. 

Design features : Clean, white with lots of space and few (if any) images. Minimalist 
templates are very easy to customize and can be enhanced by colorful images, striking 
logos and stylized posts. 

Used by : Many blogs in the Technorati Top 100 lis t use a minimalist style of blog template. 

Tech news sites Mashable and TechCrunch are among the most memorable blogs which 
use this style to great effect, as the clean layout emphasizes content and ensures posts are 
easy to read. 


Free Minimalist Blogger Templates 

Here is a selection of free Blogger templates which are based on this Minimalist style: 
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Minimi by BlogCrowds 

Minimi is a pale, two column template. It features a playful logo and matching colors for 
titles and links, and is suitable for most types of blogs. 

Demo | Download 


C 4TUCM.OC | 


Style Browser 


Thursday, March 15. 200" 
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Blog Air hive 
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Pottad bf Blogcroaili at 
Labels: M .-il 


Figure 17: Minimi Blogger Template 

Ser Photoblogger by Ser Turista and Brian Gardner 

Ser Photoblogger is a simple, one column template. It includes plenty of room for 
photographs and blog posts, and features three columns in the footer for meta-data, 
blogrolls and other widgets. 

This particular template may not be suitable for blogs which need space to include many 
different widgets; however, this is certainly an elegant and well designed Blogger template. 

Demo | Download 


SER PHOTOBLOGGER 
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Figure 18: Ser Photoblogger Template 

Simpress by Deziner Folio and Blog and Web 

This is a much more versatile design which takes advantage of the increased screen size of 
modern web browsers. 

It features two sidebars and a flattering header section; you can be sure to fit many widgets 
in this layout, while maintaining an overall clean design. 

Demo | Download 




Figure 19: Simpress Template 

Clips by Btemplates 

This minimalist design has is stylish and functional. It features tabbed sidebar navigation 
which is built into the template code and is versatile for any blog niche subject. 

Demo | Downloaded 


15 


The Blogger Template Book 


C I i p s 


S** BT EMULATES 



Lcrem psom 

Hoeted by rfc* a 


BTemplates 


m*H A(H n . 3xo 

i dub imm l. Latm 2, Loam 3 
icram cam an at jrnai ccri*ct*tu I 
at w rg a*, wd <3b a»/»nod trw 
roaxrt a uco« at ax»» rr^yru ant u» 
am ad nwvn vMrwrt, ®ji nosti jd Mouoor 
ccrmodo arngtat war «/• n^« aw n rap u rnrotm r vokccK* vac 
c*m doteM «u 1 j 9K nil patah# E*cwrta«a art oocaacat oodrta* 
irutta*. Mad »• iut* Ma>i» nuK a an u «*t Utuvjn 


mo lint n 


IC*M» !*«• ddor «t M, WMEtaif *ll«E' 
riiMrt Jt Utr »« «* & Ecr « <JB rw* 

»< atoKdayii4atwo 


I * 1*1 * 4nn *>» Nm 

>Unm 1 j i 

•tdaaina *;ji 

Oicram 5 


12)1 


• wtmwmajb 

• « arm t 

• comcMtir E^gir g at* 


l tamoo 
? m*l/t 
3. utLboa 


Figure 20: Clips by Btemplates 


Pop Blue by Zona Cerebral 

This pale design is accented with hints of blue. It features a built in navigation bar beneath 
the header for links to your important blog pages. 

The layout includes three columns with two sidebars to the right of the main post column, 
and is fluid to adapt to different screen sizes. 

Demo | Downloaded 
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Figure 21 : Pop Blue by Zona Cerebral and Blogohblog 
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Dark designs 

Dark blog designs feature a dark backdrop which is accented by pale text and colorful 
images. Striking imagery can be set off against a dark background to great effect, which 
makes this style an ideal choice for designers and photobloggers. 

Design features : Dark designs offer a powerful visual impact. However, the contrast 
between a dark background and pale text can make long paragraphs difficult to read. 

Used By : Photobloggers, designers and sometimes technology related sites. Post Secret 
uses a dark template which sets off the homemade postcards perfectly, while Deziner 
Folio's template provides a striking example of how colors can accent a dark backdrop to 
great effect. 


Free Dark Blogger Templates 

Here are some examples of dark Blogger templates which are free to download: 

Photoblog by Ser Turista and Blog oh Blog 

Photoblog is a simple, one column design which is perfect for photo-bloggers and designers 
who use their blog to showcase their work. 

Demo | Download 



Figure 22: Photoblog Template 

Colourize by Blog and Web 

Here is a delicious dark template for you to enjoy! 

I wish I could have included more of this excellent design in the screenshot as it includes so 
many useful features! 
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Colourize is a two column design with a wide sidebar to the right. It includes a built in 
navigation bar and search box in the header, while the footer is divided into three sections 
for your miscellaneous content. 

Demo | Download 


Colourise 


Lorem ipsum 


Euqutui 


Arc Hive <j*l biof 


Figure 23: Colourize by Blog and Web 


Wiremesh by Aborregate 

Wiremesh is a striking two column template which includes plenty of space for widgets. 
Demo | Download 



Figure 24: Wiremesh Blogger Template 
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DF Theme by Deziner Folio and converted by Jackbook 

This dark design would be an excellent choice for designers or technology bloggers. 
Converted from Deziner Folio's original Wordpress theme, this has proved a popular 
template for Blogger users and includes many useful features. 

Demo | Download 




This Blog is powered by the Web 2.0 Modern BloggerTemplate Dark by Make Money Online With JackBook dot Com , Dezinerfolio 
and Newbies Make Money Online With Get Paid to Sites. 

this template was originally created by dezinerfolio.com forWordpress.org, and was converted from a wordpress theme into a 
beautiful and powerful blogger template by Jack. 

you can read more about this here and you could also find the download link there. 

Checking Technorati Profile 
Get Paid to Click PTC Site 


This entry was written by JackBook.Com and posted on Wednesday, July 1 8, 2007 and tiled under Random Thoughts Bookmark the 
permalink . Follow any comments here with the RSS feed for this post . Post a comment ( in a new window ) 





Hemingway (Ported for Blogger by BlogCrowds) 

This is one of my all-time favorite Blogger templates! It features a unique side-by-side post 
display on the home page; elegant styling on post pages, and three columns in the footer. 

Demo | Download 
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Figure 26: Hemingway for Blogger 


Colorful/Ornamental Designs 

Colorful and highly decorated templates have a striking visual impact on the reader and are 
instantly memorable. 

While such templates may be beautiful and eye-catching, you must be sure that the design 
is fitting for your subject matter! While suitable for design, art and personal blogs, such 
designs are not effective for branding professional and technical blogs. 

Design Features : Highly decorative and generally colorful, with many background images, 
sections and stylistic effects. 

Used by : Designers, artists and personal diarists to great effect. Web Designer Wall and 
Veerle's blog are prime examples of colorful and ornamental blog designs. 


Free Ornamental Blogger Templates 

Here are some examples of elegant and ornamental designs which are available for free 
download: 

Rainbow Garden by Jackbook 

This is a highly ornamental (and utterly gorgeous!) design for Blogger. Rainbow Garden 
features three columns (with a sidebar to each side of the main posts section); this design 
would be ideal for a personal blog, or a site with a niche based in the arts. 

Demo | Download 
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Figure 27: Rainbow Garden Blogger Template 

Made in Spain (Distributed by eBlog Templates) 

This stunning design appears like a notebook, with a sidebar on the right-hand page and 
tabs used for navigation to the left. 

First impressions of this template would invoke the sense of a journal or idea notebook; as 
such, this design would be best suited to subjects such as these. 

Demo | Download 



Figure 28: Made in Spain Blogger Template 

Lemon Twist by Far From Fearless, converted by Jackbook 

As Jacky Supit says in his announcement of this template, this design is virtually PERFECT! 
It is one of the most stunning Blogger designs I have ever seen, and believe me this 
screenshot does not do justice! 

This template is highly ornamental, with stylized date icons, and a tabbed navigation bar 
which is built into the design. Sidebars are accented with a complementary color scheme, 
and a fabulous script on post pages which delivers a list of all commenters in addition to the 
regular comment section. 
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If you are seeking a beautiful ornamental design for your blog, I strongly recommend that 
you take a look at Lemon Twist! 

Demo | Downloaded 


m farfromfearless 


home About Archive Portfolio Contact 



LemonTwistTemplate is the beautiful template created by 
JackBook.Com, originally a wordpress theme by Chris Murphy of 
FarFromFearless.com. Want to download it? Read More 



This is Lemon Twist Template 

Posted: Kamis, Juni 21, 2007 | Author: JackBook.Com | Filed under: category One, category 
Three, category Two 

This beautiful 
theme was created 
by Chris Murphy 
from 



♦ FarFromFearless.com 

The story began after i forgot that today is friday, which i should give my 
readers a new template for this week. 

Ah how could i forgot about it. well, i can't use that as an excuse, so let's just 
roll onl Hope I can convert this beautiful theme in 2 hours, that is the time left 
for this friday. 

Jacky Supit 

* wuuw larlcRnrilc mm 


• thanks jack.i'll try what you .. 
i veryrox. 


» category One (1) 
i category Three (1) 
» category Two (1) 


• Juni 2007(1) 

• Juni 2003 (1) 



Figure 29: Lemon Twist by Far from Fearless, converted by Jackbook 


Graffiti Art by Blogger Tricks 

This stunning template includes many different colors highlighted against a dark 
background. It includes built in tabs for links to important blog pages and a feed icon 
embedded in the top of the sidebar. 


Demo | Download 
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Subscribe RSS0 


Search 


nulla pariatur. Excepteur sint occaecat cupidatat 
officia deserunt mollit anim id est laborum. 


proident, sunt 


Lorem Ipsum dolor sit amet, consectetur adipisicing elit, 
eiusmod tempor incididunt ut iabore et dolore magna aliqua. 
ad minim veniam, guts nostrud exercitation ullamco 


sed do 
Ut enim 


Lorem ipsum dolor 


consectetur adipisicing elit 


Lorem 1 (1) 
Lorem 2 (1) 
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Templates Blogger 
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Blog Archive 
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Figure 30: Graffiti Art by Blogger Tricks 


Birdie's Good Life 

This design has a somewhat feminine appeal. I've seen this used to great effect on craft 
blogs as well as personal/women's' interest blogs. 


View preview and download 






M» tri, .,,1.1,1 ... 
***:•-*• 

try 



CIE'ttard 


0 


SAflADO $ Dt EMI 110 M 


JMI 


I n I rod tiring RirdirSay.s.roiu 


let, «-» afrp is jottm be ecw real? ee ►; sxrl Jr *aI actus*/ «a»r« al 

•te'll :C'Xct>be3»rsrtrjwA«.t*le?S'.‘j sn!! 1 

s' u* Ftnfftii mr >4 k, di Are 

.-r.*r ririfcnrnm « il vn -ti nnvnrtn\ 

ncwae: wst e osat vet. <^*xjete*-J sapw. •tstai.r at. atg-esn 

• Vl-A lf-*r. I •<« -t-rd n. -H i -4 I.t, . 

•nrft a<:. ejet *«rare wus n.te tw ercs. ^etereKx 
irtnn« tr< t I n<>* N». miy* imb, fmw4 »rl r«r « •)< 
rfcarerre •»«« rt*. Veett J.nr itk, ? «jgj» CtJauncniMi.n 
“rx«'t iTj(s M»sl Jxk d::nr fcren Pscrteicje J#t> xu: 
ttatts limner r«c dt, wy* '(» >t^* *nTi 

»3Jrt cx;M.at. sw mu xVm: seat, \t.ac rr pjvs 

TVlftt re IK f* *(•- *1 



23 





The Blogger Template Book 


Figure 31 : Birdie's Good Life Blogger Template 

Corporate Designs 

This style of Blogger template feature clean lines, often with a contrasting color in the 
header, and generate a visual impact of authority. 

Design Features : Clean lines, structured layout and little (if any) ornamentation. 

Used by : Professional/corporate style blog designs are particularly suitable for businesses, 
technology blogs and other niche subjects which require a sense of authority. 

Caroline Middlebrook and Problogger are both examples of effective, corporate blog 
designs which convey authority in reflection to their niche content. 


Free Corporate Blogger Templates 

Here are some examples of professional and corporate Blogger templates which are 
available for free download: 

Revolution by Brian Gardner (converted by Zona Cerebral) 

This is by far one of the most professional and well designed Blogger templates I have ever 
seen! Converted from Brian Gardner's excellent Revolution theme for Wordpress, this has 
been widgetized and converted for use with Blogger by Zona Cerebral. 

Demo | Download 







Figure 32: Revolution Theme for Blogger 

iPlantilla by NDesign Studio, converted by Blog and Web 

This Blogger template's theme would be ideal for a technology-related site as the color 
scheme and background color are typical of this niche. With clean lines and defined sidebar 
sections, iPlantilla appears professional and business orientated. 

Demo | Download 
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Figure 33: iPlantilla theme for Blogger 

WP Premium Black by Zona Cerebral 

Here is a truly elegant design which is perfect for professional bloggers, which is a 
conversion of the original Wordpress theme by R Bhavesh. 

This features a built in search bar and navigation for your important blog pages. 

Demo | Download 



Figure 34: WP Premium Black by Zona Cerebral 
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Field of Dreams by Blogger Tricks 

Many corporate websites reinforce a sense of trust by using landscape inspired designs in 
their design. This is an excellent example of how a Blogger template may be adapted to the 
same principles. 

This design features a stunning header section with a navigation bar and subtle sidebar. A 
search box is built into the template, and you can also add links and a copyright notice in 
the footer section. 

Demo | Download 



Image in a Post 


About me 


Posted by Kranthi 

This Blogger Template is designed by Kranthi of Blogger Tricks based on the wordpress 
theme created by notsoboringlife.com. You can download this beautiful design at 
Blogger Templates. 



Links 


Edit me # 1 
Edit me # 2 
Blogger Templates 
Blogger Tips 


Categories 

blockquotes (1) 
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Figure 35: Field of Dreams by Blogger Tricks 


DropShadow by Brian Gardner, converted by Mizake 

DropShadow is an elegant and wholly professional style of Blogger template. This was 
originally designed by Brian Gardner, and has been converted for use in Blogger templates 
by Mizake. 

Demo | Download 
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Figure 36: Dropshadow Blogger template 

Ad Optimized Blogger Templates 

Ad-optimized templates are designed for professional bloggers. These are structures 
around prominent areas of blog "real estate" for optimum visibility of advertisements. 

Design features: Ad optimized templates feature little ornamentation (which would detract 
from the visual impact of advertisements), a clean simple layout and integrated ad-spaces. 

Used by: Professional bloggers who need maximum exposure for their advertisements and 
affiliate banners. 

A prime example of a template which is optimized for ad exposure is John Chow: on this 
site, you can see every possible space is optimized for ad integration; rather than appearing 
disjointed, it is clear the template was structured around these spaces. 


Free Ad-Optimized Blogger Templates 

Here are some examples of ad-optimized templates which are free to download: 

Ads Theme Blogger by Btemplates 

This is a typical example of a blog theme which is optimized to display ads. Ads Theme 
includes ad slots in the header; a sidebar capable of displaying three 125px ads side by 
side, and a large rectangular AdSense advertisement. 

Demo | Download 
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Figure 37: Ads Theme Blogger Template 

WP Polaroid by Adii, converted by eBlog Templates 

This pale design has some excellent spaces available for ad placements. The most 
prominent place is the three squares section at the top of the sidebar, though you will also 
discover ads can be placed above the main posts section, in the sidebar and even in the 
footer. 

Demo | Download 



Figure 38: WP Polaroid Blogger by Adii and eBlog Templates 
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Forte by Blog and Web 

This simple template features a wide sidebar which is optimized for 125px square ads. You 
could also add wider square ads in this section and half-banners above the main posts 
section. 

Demo | Download 


Forte - BTemplates 

BTemplates.com 


Home Entradas (Rss) Comentarios (Rss) 


Lorem Ipsum 

Posted by Francisco at 8:36 PM . Sunday, March 16, 2008 C?2 comments 

Labels: Lorem 1, Lorem 2, Lorem 3 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
do eiusmod tempor incididunt ut labore et dolore magna 

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum. 

Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, Sed Do Eiusmod 
Tempor Incididunt Ut Labore Et Dolore Magna Aliqua. Ut Enim Ad Minim 
Veniam, Quis Nostrud Exercitation Ullamco 

Listl: 


• Lorem ipsum dolor 

• sit amet 

• consectetur adipisicing elit 


List 2: 


© Lorem 1(2) 
© Lorem 2(2) 
© Lorem 3(1) 


Templates 

Templates 


Templates 

Templates 

mu 

HU 


1, tempor 


List Lorem Labels 

Figure 39: Forte by Blog and Web 


Bloggerized Adsense by Blogger Beta 

This dark blog template lots of ad spaces: above the main posts section; a wide link bar 
below the header, and a sidebar which can include wide AdSense advertisements or 
banners. 

Demo | Download 



Figure 40: Bloggerized AdSense Template 
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Premium Blogger by R. Bhavesh, converted by Jackbook 

This Blogger template features a helpful tab view in the sidebar which frees up space so 
ads are visible above the fold. The sidebar is wide enough to accommodate three 125px 
ads or a wide rectangular ad. 

Demo | Download 


R. Bhavesh 

Subscribe via EmaM 




MRWIS W«9<P0*fl01li> CQMItfCVMI 


Plugin that revolutionizes the way premium 
themes are biuld 

Or: Mi 


PLUGIN 

REMIX EDITOR 


ibdMH CJMDCftM 

1 Stvth d» Ihit b*>a 





Rrccnt I'mn 


' tfm 


• *6 Ml-. EDITOR PVJOU tti 


Figure 41 : Premium Blogger Template 

Things to consider when choosing a design 
style for your blog 

Here are a few ideas to think about while searching for the perfect design style for your 
blog: 

• What is your blog's niche subject? 

• Are there trends of design for other blogs and websites in your niche? 

• Which styles and colors appeal to you the most? 

Considering these factors will help you decide on the style of design best suited to your blog 
and template requirements. 

More Free Blogger Templates to Download 

The themed examples of Blogger templates are just a small percentage of the free themes 
available to download. 

For even more inspirational templates, take a look at the 101 excellent Blogger templates 
showcase. 
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In Chapter 8, you can also find resources to the best free Blogger template providers, and 
collections of templates to showcase the variety of templates from different authors. 


Chapter Summary 

In this chapter, we have explored different styles of blog layout and design trends, including: 

• Single column templates 

• Two/three column layouts 

• Magazine style layouts 

• Five different design trends 

• Considerations for your ideal layout and blog design style 

Each section has been illustrated with examples of free templates you can download to use 
in your own blog, or as inspiration to create your own design. 

Let's move on to explore the different template formats and basic methods of installing a 
new blog template. 
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Template formats and installation 


Once you've found your perfect Blogger template design, you'll need to know how to 
install it. The method for installation depends on the type of template you have 
downloaded, and whether or not you are required to host images yourself. 


I n this chapter, we'll explore the basics of Blogger template formats and how to download 
and install a new Blogger template, from saving the file to your computer through to 
viewing the finished design. 

But before we get into the details, there are a few things you should know and understand 
before attempting to upload your new design. 


Three things to know before installing a new 
template 

Before attempting to install a new template, there are a few things you should be aware of: 


1. Installing a new template will delete your existing 
widgets 

If you install a new Blogger template using one of these basic methods, you will lose all of 
your existing widgets. 

This is because the widgets you have installed in your existing template allocate widget 
templates in the HTML code. Unless these widget templates are in place in your new 
template, Blogger assumes these widgets are no longer necessary, and deletes them. 


0 


In Chapter 4, we will look at an advanced method if installation which allows you 
to transfer widgets from one template to another. 
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2. Some Blogger templates require you to host your 
own images 

You may be required to host the images for your template. Most blogger designers will 
inform you if this is necessary, either within the blog post/page explaining the template, or in 
a "read me" file which you receive with the template download. 

Many third party Blogger templates include background images in the layout. Background 
patterns, rounded corners, logos and icons are all images which need to be hosted in an 
online location. You cannot upload these to Blogger! 

There are many free image hosting services you could use to host these images, which are 
linked to later in this chapter. 


<? 


3. Your uploaded template may not look the same as 
the demonstration blog 

Most Blogger template designers will upload their free templates to a demonstration blog. 
This allows you to see the template in action and make an informed decision about the 
suitability for your own requirements. 

These demo blogs are set up to enhance the overall design of the blog, and may feature 
header images, ads and widgets which are not present in the basic template download: 

they are intended to showcase how your design could appear. 

So please don't feel let down if - on initial installation - your design doesn't look as good as 
the demonstration blog! With a few tweaks, some additional content and the installation of 
widgets, you can have your new layout looking at least as good as you hoped. 

Two different template formats and how to 
install them 

There are two different formats of Blogger template which may be available for you to 
download: 

• An XML file: the most common type; quick to install though sometimes problematic. 

• A text file (less common but easier to install). 


You do not need to find hosting for any images used in the templates provided by 
Blogger Buster. All images used in these templates are hosted for you, with the 
option to download if you prefer. 


Both of these formats can be used to install a Blogger XML template. However, there are 
differences in the ways these file types should be downloaded and installed. 
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XML format template files 

Blogger's layout templates are formatted in XML (extensible Markup Language) which 
enables your posts and sidebar widgets to be dynamically added to the design in their 
appropriate place. 

XML templates are formed in a tree-like structure, where elements can be expanded. As 
such, if you try to view an XML template using a basic text editor or your web browser, you 
may notice the mark-up seems odd, with dashes before each line of code. 

How to download an XML format template 

Most Blogger template designers offer XML templates in a compressed Zip or Rar folder. 
These compressed files may be uncompressed and opened using Winzip or WinRar. 

You should download this compressed file to your computer, and then decompress using a 
suitable program. 

If you are using Windows XP or another recent operating system, you may already have 
decompressing software installed on your computer. In this case, you will be prompted to 
use the appropriate program to open the Zip or Rar file once downloaded. 

If you don't already have such software installed, you can download free versions of below: 

• Winzip (try free for 45 days) 

• WinRar (trial version) 

Sometimes, blog template providers offer the raw XML file for download (which is not 
contained in a compressed folder). 

In this case, you will be offered a link directly to the download location for the raw XML file. 
You should right-click on the link and choose "Save As", or follow the link and choose 
"Save" from the File menu in your web browser. This should save the template on your 
computer with the .XML extension. 




If you follow a link to a raw XML template file, this may look rather strange in your 
browser! You may see dashes appear before each line of code, or see an 
awkward, disjointed version of the template. 


Do not try to copy and paste the code from a raw XML template file! This will not suffice for 
installation, and usually results in an error which says "Your template could not be parsed 
as it does not contain the correct mark-up". Instead, you should follow the instructions 
above. 

How to upload XML templates to your blog 

Once you have successfully saved your XML format template to your computer, you can 
upload this to your blog through the Blogger dashboard. 

1 . Log in to your Blogger account and select the blog you wish to work with. Next, click 
on the Layout tab and choose the Edit HTML option. 
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2. Near the top of this page, you will see a section which says "Upload a template from 
a file on your hard drive". Click on the "Browse" button to locate your new 
template's XML file in its stored location on your computer. 



Backup / Restore Template 


Before editing your template, you may want to save a copy of it. Download Full Template 


Upload a template from a file on your hard drive: 


Browse... 


Upload 


Figure 42: Upload your new Blogger template 

3. Finally, click on the "Upload" button, which will load your new XML template into 
your blog. 


You may be prompted to confirm deletion of any widgets present in your template before 
your new template will be saved. If you don't mind losing these widgets, you can confirm 
these changes. 


0 


When you upload a new XML file for your Blogger template, your existing 
template will be deleted. Be sure you have made a back-up of your existing 
template before uploading a new one! 


Text Based Template Files 

If you are offered a text file to upload your new Blogger template, you will need to copy the 
contents of this text file and paste this into the Edit HTML section of your blog's dashboard. 

While text-based templates appear like regular HTML files, these templates will be 
formatted as XML templates once uploaded to your blog. 

How to download text format templates 

Text based Blogger template files may be offered as text to copy and paste directly from the 
designer's website/blog (as in the case of BloaCrowds templates ), or as a text file which can 
be downloaded to your computer (see Figure 19). 
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Demo | Download [copy & paste to Edit HTML] 

<? xm l version="l . 0" encoding="UTF-8" ?> 

< ! DOCTYPE htrnl PUBLIC "-//U3C//DTD XHTML 1.0 Strict/ /EN" 

"http : //www. w3 . org/TR/xhtmll/DTD/xhtmll-str ict . dtd"> 

<html xmlns= ' http : //www. w3 . org/ 1999/ xhtml 1 

xmlns :b= 1 http : //www. google . com/2005/gml/b ' 

xmlns : data= 1 http : //www. google . com/ 2 005/ gml/ data' 

xmlns : expr= 1 http : //www. google . com/2005/gml/expr 1 > 

<head> 

<b: include data =, blog' name= ' all-head-content ' /> 
<title><data:blog. pageTitle/x/t it le> 

<b : skinx ! [CDATA[/ * 


Blogger Template Style 
Name: Black Minimalism 

Designer: Valter Nepomuceno 

URL: http://cinexl.net/blog (no longer working) 


Figure 43: A text based template download from BlogCrowds 

In either case, you need to highlight and copy the entire body of template code to your 
clipboard. Copying to your clipboard can be achieved in the following ways: 

• Use the CTRL+C or CMD+C keyboard shortcut. 

• Select "Copy" from the edit menu of your operating system/web browser. 

• Right click the selected text and choose "copy" from the options given. 

How to upload text based templates to your blog 

Once you have copied the text-based Blogger template to your clipboard, you are ready to 
replace your existing Blogger template with this new file. 

1 . Log in to your Blogger dashboard and select the blog you need to work on. Click on 
the Layout tab, then on the Edit HTML option. 

2. On this page, you will see the template code for your existing template file; this is 
housed in a scrolling box: 
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r 


Posting Settings Layout 



Page Elements 


Font? and Colors 


Edit HTML 


Pick New Template 


Backup / Restore Template 


Before editing your template, you may want to save a copy of it. Download Full Temulote 
Upload a template from a file on your hard drive: 


Browse.. Upload 


Edit Template 


Edit the contents of your template. Learn more 


□ Expand Widget Templates 


<?xml version-"!. 0" encodlng-”UTF-8" ?> 

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : // vvv. v3 . org/TR/ xhtml 1/ DTD/xhtmll-trans it ional . dtd"> 

<html xmlns= 1 http://www. w3 . org/ 1999/ xhtml 1 xml ns :b= 1 http:// wvv.google.com/200S/gml/b 1 
xmlns : data- * http : // ww. google . com/2005/ gml/ data* 
xmlns : expr= * http : //raw. google . com/2005/ gml/ expr 1 > 

<head> 

<b:include data='blog' name-' all-head-content '/> 

<b:lf cond-' data:blog.pageType == squoc; index fiquot; ' > 

<tltleXdeita:blog. title/ X/ tit le> 

<b:else/> 

<titlexdata:blog.pageName/x/tltle> 

</b: i£> 

<b:if cond*'data:blog.pageType -- Squot; indexsquot; ' > 

<meta content- ' Blogger templates, tutorials and tools. Simple techniques to help you 
build a better blog.' name-' description' /> 

<meta content-'blogger, template, tutorial, resources, tools, customize, veb design, 
blog design, free blogger templates, blogger help, three column, themes, favicon, 
seo , google blogger' name =' keyvords' /> 

</b:if> 

< !l > 


Revert widp.et templates to default 


CLEAR EDITS 


SAVE TEMPLATE 


Figure 44: The complete HTML code for your Blogger template 


<? 


4. Once all the text is highlighted, you can paste the new template code from your 
clipboard in place of the existing code. 

5. Before attempting to save your template, you can preview the changes first. If there 
are any errors with the template, you will be alerted of this during the preview. 

6. When you are sure the template appears properly in your blog, you can proceed to 
save the template. 


Select all of the text inside this box. 


The easiest way is to place your cursor inside the box, then use the CTRL+A (or 
CMD+A for Mac users). 
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Troubleshooting tips 

While these are basic instructions for uploading your new Blogger template, there are some 
errors which could occur. 

Here are the three most common problems experienced when attempting to upload a new 
template: 

Error codes when uploading a new template to a blog with many widgets 

If your existing template has many different widgets in place, you may receive an error code 
when attempting to upload an XML file, or save the pasted contents of a text file. 

I cannot be certain why this happens (in theory Blogger should be able to handle the 
deletion of many widgets at once!) though I can offer some advice on how to deal with this 
problem. 

You need to delete most (preferably all) widgets from your layout through the Page 
Elements section of your dashboard. This may be time consuming, though attempting to 
shortcut by deleting the widget codes from your template will almost certainly result in more 
errors! 

While it is possible to retain the widgets present when uploading a new template, the 
procedure is more complicated than the methods described above. We will cover this 
method in full detail in Chapter 4. 

The message "Your template could not be parsed as it is not well formed" 

There are two possible reasons for receiving this error message: 

You may have copied the contents of an XML template and pasted as regular code (this 
method does not work to upload templates in XML format). 

In this case, check the format of the template from the Blogger template designer's page. If 
stated that the download is in XML format, you need to follow the steps above to upload this 
as a complete file. 

If pasting the contents of a text file (or when copying template code from the designer's 
website), you may not have copied the entire code, or some existing code from your 
previous template may be left behind. 

In this case, repeat the process being careful to copy the entire code for your new template, 
and highlight ail existing code in your old template before replacing with the new code. 

The "Your template is invalid because the tag 'bisection' appears inside of the tag 
'head'" message appears when uploading a new template. 

This message appears where the designer of a Blogger template has optimized the 
template for SEO using a title tag switch which is now invalid. 

Unfortunately this problem is a little more difficult to solve! 

For the solution, you will need to edit the Blogger template using a text editor (I prefer 
Notepad ++ ). 

Open your XML template file with your text editor, and find this section of code: 
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<b:if cond= ' data : blog . pageType == "item'"> 

<b: section id= ' titleTag ' > 

<b: widget id='Blog2' locked=' false' title='Blog Posts' type='Blog'> 
<b : includable id= ' comments ' var='post'/> 

<b : includable id='postQuickEdit' var='post'/> 

<b : includable id='main' var= ' top ' xtitlexb : loop values=' data: posts' 
var= ' post ' Xb : include data='post' name='post' /X/b:loop> 

<data : blog . title/X/ titleX/b : includable> 

<b : includable id='backlinkDeleteIcon' var='backlink' /> 

<b : includable id= ' f eedLinksBody ' var=' links ' /> 

<b : includable id='backlinks ' var='post'/> 

<b : includable id= ' status-message ' /> 

<b : includable id= ' f eedLinks ' / > 

<b : includable id= ' nextprev ' /> 

<b : includable id='commentDeleteIcon' var=' comment '/> 

<b : includable id= ' post ' var= ' post ' xdata : post . title/X/b : includable> 
</b:widget> 

</b : section> 

<b:else/> 

<titleXdata : blog . pageTitle/X/ title> 

</b:if> 


Replace this entire section with the following code instead: 

<b:if cond=' data: blog. pageType == &quot; index&quot; ' > 

<titleXdata : blog . title/X/ title> 

<b:else/> 

<title><data : blog . pageName/X/ title> 

</b:if> 

Save the file once you have edited this code, and then upload using the appropriate method 
for the template format, as described above. 

Hosting your own template images 

As I mentioned at the beginning of this chapter, some Blogger template designers require 
you to host any template images on your own servers. 

This may seem like hard work, but there are benefits of hosting template images yourself: 

• You are assured of complete control of your template images 
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• Your template will not malfunction because of the designers bandwidth limitations, or 
because images are deleted 

• You will be able to modify and change template images if deciding to customize your 
template in the future. 


If you are required to host your own images, you can first upload the new template to your 
blog, and then change the URLs for images in the template code afterwards. This is the 
preferred method, as you will be able to see gaps where template images should appear. 

Uploading images to your own hosting account 

The images for your blog template are usually provided in the download folder for your 
template. 

If you already have a web hosting provider, you can simply upload your template images to 
this hosting account. 

However, for those who don't have access to a web host, there are many free services 
which you could use to host your template images. Here are some of the services I 
recommend: 

• Photobucket 

• ImageShack 

• ImageBam 

• FLickr 

• Picasa 


As you upload each image, make a note of the URL location (or copy this to a text file for 
easy access) along with the name of each image. 

Replacing image URLs in your Blogger template 

There are no hard and set rules to replace the entire image URLs in your template, so here 
I will explain my personal method. 

1 . Open up the Edit HTML page in your Blogger dashboard and check the "expand 
widget templates" box. This ensures you can access all image locations in one 
sitting. 

2. With a list of all the image names and their corresponding URLs to hand, use the 
search function of your browser to locate each image name (e.g.: imagel .jpg, 
header.gif) in turn, replacing the present URL for each image with your own hosted 
image location. 

3. After each replacement, preview your template to ensure the image appears in its 
correct place. 

4. Once all images have been replaced, do one final check before saving your 
template. 

Now that all of the image URLs are replaced, your Blogger template installation is complete! 
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Chapter summary 

In this chapter, we have explored: 

• Three things you should know before uploading a new template 

• The difference between template file types 

• Basic installation methods for new Blogger templates 

• Troubleshooting template uploads 


By now you should have a sound understanding of how to upload a third party template to 
your blog. 

So let's move on to the next chapter where we'll learn some advanced techniques of 
uploading a new template which will offer you much more control over the installation 
process and make the transition virtually seamless for your readers. 
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Advanced installation methods 


In this chapter, we'll look at some advanced techniques of Blogger template installation 
including: how to maintain your existing widgets; how to tweak your template to 
perfection, and how to change templates seamlessly, so your readers will barely notice 
the change until it's already complete. 

P reviously, we've looked at how to install a new template using standard methods. 
However, these methods have some drawbacks: we cannot retain existing widgets; 
image URLs will need to be altered (where required), and any other template tweaks 
will be made after the initial installation. 

In this chapter, I will share some of the techniques which I use to install Blogger templates 
professionally, ensuring an almost seamless change of theme which is beneficial for you 
and your blog readers. 


Four Steps to a Complete Blogger Template Upload 

To change your template on an existing blog while retaining all widgets involves four major 
steps: 

1 . Create a test blog 

2. Upload your new template to the test blog 

3. Transfer widget templates from your existing blog to the test blog 

4. Transfer the modified template with widgets intact to your existing blog. 


Using this method ensures you will not receive any error messages when uploading the 
finished version of your new template to your existing blog. It does take more time and 
modification of template code, but the finished result is well worth the effort it involves! 

Let's go over each of these steps in order. 

Step 1 : Create a test blog 

Each time I want to try out a new template or modify code from a template, I make use of a 

test blog. 
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Using a test blog ensures your existing blog will not be affected when you are 
experimenting or altering some aspect of your template code. Once you have finished work 
on your template, you can safely upload the modified version to your blog. 

Blogger allows us to create and use as many blogs as we would like (within parameters of 
fair use, of course!). This means we are allowed to use a test blog (or two) for experimental 
purposes. 


How to create a test blog 

Log in to Blogger and view the main dashboard where you will see a list of your existing 
blogs and links to the main pages of their individual dashboards. 

Click on the link which says "Create a blog". On the next page, you will be prompted to 
provide the Blog*Spot URL for your test blog, and also to name it: 


B Blogger 


£ NAME BLOC 


Name your blog 

Btog title 

My Test Blog 

Your Nogs tlUe wil appear oh your pubitshed bfos., co your dashboard and in your 
profile. 

Blog address (URL) 

http:/.' o-nonsensicol-urMor-testi . blogspot.com 

Check Availability 

The URL vou select wi be used by visitors to access vcur bbe. Learn more 

Word Verification 

zSaffir 


&■ 


Type the characters you see in the picture. 


Figure 45: Creating a test blog 

For your blog title, choose something which will help you recognize this easily as your test 
blog (to prevent you accidentally accessing the wrong dashboard). 

For the Blog*Spot URL, I would advise you to use something nonsensical: a random 
string of letters and numbers perhaps, which you doubt anyone else would want to choose 
as their own blog URL. Your test blog will only be used for testing purposes, so there is no 
need to a blog URL which is valuable for search engines or visitors. 

Once you have chosen an available URL and completed the word verification, click the 
"continue" button. 

Don't spend too much time choosing which default template to use for your test blog! In a 
few minutes' time we will be changing this to the template you have downloaded for use in 
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your main blog instead! Simply click "continue" to get through to the page where you can 
create your first post. 


Add some filler posts 

To ensure your template will be correctly displayed (and so we can fix any problems before 
updating your main blog template) you will need to write a couple of "filler posts" for your 
test blog. 

Filler posts are more effective when they contain at least a paragraph or two of test. To 
save typing out this content by hand (and wasting time) you may want to consider using 
Lorem Ipsum text. You can generate as much Lorem Ipsum as you need using the 
generator on the Lorem Ipsum website . 

Here is a paragraph of Lorem Ipsum filler text which you could copy and paste as filler text 
for your test blog: 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu felis auctor tellus 
condimentum dapibus. Curabitur nec orci sed lectus sollicitudin lacinia. Quisque ut 
erat et tortor venenatis dignissim. Quisque nec nisi. In hac habitasse platea dictumst. 
Phasellus molestie, neque ut adipiscing ullamcorper, tortor ipsum fringilla velit, sed 
lacinia elit lectus eu nibh. Sed eget turpis ac elit consequat volutpat. Pellentesque 
fermentum. Donee dolor eras, euismod vel, vestibulum eget, adipiscing sed, ante. Sed 
condimentum erat eu velit. Aenean enim ligula, semper eu, pellentesque non, 
venenatis lobortis, felis. Nulla quis felis. Nullam dignissim pretium libero. Morbi quis 
sem. Sed sagittis quam nec turpis. Donee ullamcorper lorem vitae dolor. Duis aliquet. 


Once you've pasted some content to the body of your posts, finish off with a title and a label 
or two. Then hit the publish button. 

Repeat this process again to pad out your test blog with a few filler posts which will help you 
ensure your template will look appropriate when uploaded to your main blog. 


Change some settings for your test blog 

When using a test blog, there are some settings and set-up configurations we should 
consider ensuring our test blog serves its purpose well. 

Unless you are using a test blog to demonstrate something to your readers (or the general 
public), you may prefer this to be hidden from Google search results, Blogger's updates on 
the main page, and from your Blogger profile page. 

First of all, click on the Settings tab in the dashboard for your test blog. Choose "No" as the 
option for "Add your blog to our listings" and "Let search engines find your blog": 
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Add your blog to our 
listings? 


No v 

A Listed blog may be linked to from Blogger.com, such as the Blogger home 
page, Blogger Play, and Next Blog. If you select "No" your blog will not 
appear in these places, but it will still be available on the Internet. This 
blog will still be displayed on your profile unless you hide it. Edit displa yed 
blogs. 


Let search engines find 
your blog? 



If you select “Yes" we will include your blog in Google Blog Search and ping 
Wcblogs.com . If you select "No", everyone can still view your blog but 
search engines will be instructed not to crawl it. 


Figure 46: Removing your test blog from Blogger's listings 

This will ensure Blogger adds "no-index" tags to your blog template which prevents it from 
being index by search engines; included in the Weblogs directory, and other publicly 
available directories. 

Once you have saved these settings, go back to your main dashboard and click on the link 
to edit your profile (in the top right corner, below your profile image). 


B Blogger 


amandarbclamumous.com Dashboard Helo Sign out 


Back To: Dashboarc 



Edit User Profile 


Privacy 



Share my profile 

0 

Show my real name 

0 

If checked, your first end last 
name wB appear on your 
profile. 

Show my email address 

0 

Currently set to 
amarnlQ§bloiserb<isterxoni 

Show my blogs 

Select blogs to display 

This IKt of blogs will only be 
displayed on your user profte. 


Figure 47: Remove this test blog from the list of blogs in your profile page 
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On this page, click on the link which says "Select blogs to display", which will take you to a 
list of all the blogs associated with your account. Deselect your test blog and save these 
settings to ensure your testing area will not be available for the general public to see. 

With all this complete, you now have a private, working test blog which you can use as your 
experimental playground for all your template needs. 

Step 2: Upload your new blog template 

At this point, the only widgets present in your test blog should be a profile widget and an 
archives widget (which are added to all new blogs by default). 

Be sure not to add any more widgets at this point! You should leave the Profile and 
Archives widgets in place for now, even if you don't usually feature these widgets in your 
blog. These widgets will act as a reference point when we transfer widgets over from your 
existing blog. 

Assuming you have already downloaded your new Blogger template, you should now 
upload this to your test blog using the method appropriate to its type: 

If you have downloaded the XML file for this template, upload this as a complete file using 
the "browse" and "upload" buttons on the Layout>Edit HTML page of your dashboard. 

If you have copied the text file for this template, you will need to replace the code in the 
scrolling box on the Layout>Edit HTML page of your blog, and save. 

Refer back to Chapter 3 for full instructions for each method. 


Error codes? 

Provided you have followed upload instructions correctly, you should not receive any error 
messages at all. 

If you do get a Bx-code or other error message, review the steps you have taken to upload 
to see if you have made a mistake. 

In the event of further unsuccessful attempts, try refreshing your browser or wait a little 
while and try once more. Blogger may be experiencing technical difficulties (which you 
could check by referring to the Blogger status page), or your browser may require a clean 
cache to proceed. 

You may also want to check with the template designer (or read comments left by others on 
the template download page) to see if there is an inherent problem with the template. 


One final check! 

Once you have uploaded your template, take a quick look at your blog to see how the new 
template looks. By the time we have finished with this method, your test blog will look 
almost exactly like your main blog instead! 
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Step 3: Transfer widget templates to your test 
blog 

This is the trickiest step, but with a little preparation, care and patience you can ensure this 
step will not cause problems! 

For this step, we will transfer the widget templates from your existing blog template to your 
new one. The widgets themselves will not be transferred, just the code which will be used to 
display them. 

In other words, once we transfer the widget templates, the widgets themselves will not 
appear; instead they will act as placeholders for the widgets when the completed template 
is transferred to your main blog. 


Prepare widgets in your existing template first! 

If at all possible, you should try to move all widgets in your existing template to one widget 
section (i.e. the sidebar). Doing this ensures it's much easier (and less time consuming) to 
copy the widget code from your existing template to the new one. 

This is just temporary! Once we have finished adding the widget templates to your new 
Blogger template, you can move them around again to other sections of your layout. 

Move all of your existing widgets to one section of your layout from within the Page 
Elements section of your dashboard, and be sure to save the changes before proceeding to 
the next step. 


Access the template code for new and existing 
templates 

For this part of the installation, you will need to have the Layout>Edit HTML page for both 
your existing blog and your test blog open at the same time. 

If your browser has tabbed navigation enabled (e.g.: Firefox, IE7), you could have each 
page open in a separate tab and simply switch between them. 

If you access the internet using a browser which doesn't support tabs, you will need to have 
two browser windows open in order to complete this step. 


Copy the widget codes from your existing blog layout 

Firstly, we need to copy the widget codes from your existing template. 

Ensure that you have not checked the "expand widget templates" box! We want the 
widget codes to be compact as this ensures they are much simpler to copy. 

The easiest way to locate the widget codes we need to copy is to perform a browser search 
for the following term: 

<b: widget id= 
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The first instance of this term will be the header widget which will look something like this: 

<b: widget id='Headerl' locked= ' true ' title='My Blog Name (Header) ' 
type= ' Header ' /> 


Ignore this widget (as we don't need to edit the header section in any way. Instead, continue 
searching for the next instance of your search term. 

Provided you have temporarily moved all widgets to the sidebar in your template, you 
should find a list of your widgets all together in the sidebar which will look like this: 


Edit Template 


Edit the contents of your template, Learn more 


□ Expand Widget Templates 

<a id='arc' naine='arc'> </aXb: sect ion class=‘ sidebar-tab' * 

id= ' sldebar-tabs-3 ' preferred- 1 yes ‘ > 

<b:widget id-'BlogArchivel' locked- 'false' title-' 1 type-'BlogArchive'/> 
</b:section></p> 

</div> 

</div> 

<b: section class* ' sidebar' id- 1 sidebar' preferred- ' yes' > 


<b:widget id- ' HTML5' locked-' false' title-' Twitter Updates' type-' HTHL'/> 
<b: widget ld-'HTMM' locked- ' false ' title-' Popular Posts’ type-' HTML ' />B 
<b:widget id- 1 Feed2 ' locked- 1 false ' title-' 1 type- ' Feed' 

<b:widget id='HTML2' locked- ' false ' title-' 1 type-' HTML' / 

<b:widget ld=' Prof ilel 1 locked-' false' title-'About He' type-'Profile'/l^ 


</b:section> 

</dlv> 

<!— spacer for skins that want sidebar and main to be the same height--> 
<div class='clear'>S#160;</div> 

< Baa tMna sasas — ; 



Revert widp.et tom plates to default 


SAVE TEMPLATE 


Figure 48: Highlight widget codes in your Blogger template 

As you can see in this example, I have highlighted all of the lines between the opening 
<b:section...> and the closing </b:section> tags. 

All of these lines begin with <b : widget id= . 

In your own template, highlight all of the lines which begin with <b : widget id, being 
careful not to highlight the <b : section> lines. 

Then using the "copy" function of your browser, copy all of these lines to your clipboard. 

? 


For most browsers, you can use the keyboard shortcut CTRL+C (this is CMD+C 
for Mac users) to copy text to your clipboard. 


48 




The Blogger Template Book 


When you have copied all of these lines to your clipboard, switch over to the Edit HTML 
page for your test blog. 


Copy the widget codes to your test blog 

At this point, you should have the entire widget template lines from your existing blog copied 
to your clipboard. 

On the Edit HTML page for your test blog, you need to search for the following lines: 

<b: widget id='BlogArchivel ' locked=' false' title='Blog Archive' 
type= ' BlogArchive ' /> 

<b: widget id='Profilel ' locked=' false' title=' About Me' type=' Profile '/> 

The easiest way to find these is to search for the term "Profile 1" using the search function of 
your browser. 

Highlight both of these lines, like this: 


Edit Template 


Edit the contents of your template. Learn more 


□ Expand Widget T emplates 

</div> * 

<div id=' concent-wrapper '> 

<div id=' crossco 1-wrapper ' style® ‘ text-al ign: center 1 > 

<b:section class='crosscol‘ id=‘crosscol' showaddelewent= ' no ' /> 

</div> 

<div id= 1 main-wrapper ' > 

<b:section class= 1 main' id='main' showaddelement® ' no' > 

<b:widget id='Blogl' locked® ' true ' title®'Blog Posts' type® ' Blog' /> 

</b:section> 

</div> 

<div id-' sidebar-wrapper '> 

<b : section class- ' sidebar ' id-'sidebar' preferred- ' yes ' > 


<b:widget id-' BlogArchivel' locked- ' false ' title-'Blog Archive' type- ' Bl ogArchive ' / 
<b:widgec id-' Profilcl' locked- ' false ' title-'About He' type- ' Pro:l i 1 1 ' 


</b:section> 

</dlv> 


Revert widget templates to default 


CLEAR EDITS 


SAVE TEMPLATE 


♦ Revert to Classic Template 

♦ View Classic Tem plate 


Figure 49: Highlighting widget code lines in the template 

While these lines are highlighted, use the "Paste" function of your web browser to replace 
these with the lines from your clipboard. 
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For most browsers, you can use the keyboard shortcut CTRL+V (or CMD+V for 
Mac users). 


At this point, you should preview your template. This helps ensure you have copied the 
widgets over correctly. If you have accidentally omitted code, you would receive an error 
message at this point. 

If everything appears to be normal, you can proceed to save the template of your test 
blog. You will be asked if you want to delete the Archivel and Profilel widgets. It's perfectly 
safe to confirm this, and should not result in an error code or message. 

If instead you receive an error when trying to preview or save your template, click the 
"Clear Edits" button and begin the process again, being extra careful when copying and 
pasting the lines! 

Step 4: Upload this customized template to 
your main blog 

This is the final part of the foolproof installation method, and is much simpler than the 
previous step! 

Copy the HTML code from your test blog's template 

While we could download the XML file, I find it much simpler and easier to copy and paste 
the template code from the test blog to the main blog. 

Here is what you should do: 

1 . Ensure you have the Edit HTML page for both your test and existing blogs open in 
tabs or browser windows. Do not tick the "Expand widget templates" box for 
either template. 

2. Switch to view the Edit HTML page for your test blog's template. 

3. Place your cursor somewhere in the box which contains the template code. Then 
use the "select all" function of your web browser to highlight all of the code inside 
this box. You can use the keyboard shortcut CTRL+A (CMD+A for Mac users) if you 
prefer. 

4. Use the "Copy" function of your web browser (CTRL+C or CMD+C) to copy all of the 
HTML code to your clipboard. 

5. Take care to highlight and copy the entire HTML code which is contained within the 
scrolling box! 

6. Once you have copied all of the code from your test blog, you can switch back to 
your existing blog's template page. 


Paste your new template to your main blog 

When viewing the Edit HTML page for your existing blog, you should again highlight all of 
the code using the "Select all" function of your browser. Be sure you have highlighted all 
of the existing code! 
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Paste all of the code from your clipboard into the scrolling code box. Then preview your 
blog. 

You should see that all of your existing widgets are displayed in the layout, and receive no 
error messages. If everything appears to be correct, you can proceed to save your 
template. 

However, if you receive an error message and are unable to preview, you should go back to 
the beginning of this step and try again. 

Once you have completed this step correctly, you have successfully uploaded your new 
template, and have retained all of your widgets during the change! 


Move widgets back into position 

Now that you have successfully copied all the widgets over and installed your new template, 
you can go to the Layout>Page Elements section of your dashboard to move your widgets 
to different locations. 

Many non-standard Blogger templates have additional areas where you can place widgets; 
you may want to experiment with widget placement in these new areas. 


Chapter summary 

In this chapter, we have looked at advanced methods of uploading a new template which 
offer more control over the finished design and ensure a seamless transition from one 
template to another. 

The techniques we have covered include: 

• Creating a test blog 

• Transferring widgets from one template to another 

• Troubleshooting template errors 

• Uploading the finished design to your main blog 


Now that we have fully explored the methods of uploading new Blogger templates, let's look 
at some basic customizations which can ensure your blog is unique. 
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Customize your Blogger template 

If you have successfully uploaded a new Blogger template or have chosen to 
customize your existing template, you'll probably want to tweak elements of the design 
to make your blog unique. 

I n this chapter, we'll look at some simple techniques to customize your Blogger template 
which will add a personal touch to the overall design. The techniques we will look at in 
this chapter are: 

• How to add your logo to the header section 
• Changing the color scheme 
• Using background images 


These simple customizations ensure your blog is visually memorable and that the style 
complements the content of your posts. 

Afterwards, we will look at other online tutorials which explain how to add even more 
functionality that ensures your design will be unique. 

Add your blog's logo to the header 

Having a unique logo for your blog will instantly set your design apart from that of other 
bloggers. A logo creates impact, and is one of the most memorable features of any great 
blog design. 

Most Blogger templates will display your blog's title as a text link wrapped in HI tags. 
However, Blogger allows us to replace this simple text link with a clickable image instead. 


How to upload your logo 

The easiest way to replace your blog's title with a clickable logo/banner is to modify the 
header widget in your layout. 

Go to Layout>Page Elements in your blog's dashboard and click on the "Edit" link in the 
header widget. 
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On this page, you can upload your blog's logo from your computer, or choose the online 
location for your image if this is already hosted elsewhere: 




Image 


0 From your computer: 


Browse. 


o From the web 


http:// 


Placement 

Behind title and description 
0 Instead of title and description 

I~1 Shrink to fit 

Image will be shrunk to 660 pixels wide. 


CANCEL I SAVE 


Figure 50: Uploading your logo to the header widget 

Check the option to use your image instead of the title and description in order to make your 
logo clickable. 

Once you have uploaded (or linked to) your image, this will display as a preview in the 
editing page. You can then proceed to save your widget and view the overall appearance of 
your logo in your blog. 


Considerations for logo size 

If your image is wider than the space available in the header section, you should check the 
box which says "shrink to fit". This ensures your logo and fits the header area perfectly. 
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Different templates have different widths for the header section. This should be indicated on 
the editing page for your header widget. Be aware that if your logo is smaller than the space 
available, the logo will display at the actual size. 


Mxllito NwOBT.il 
M* OmcrVlfa* 



Maximum, 
width 
available 
for header 
image 




Figure 51 : Work out the maximum width available for your logo 

In the example above, there is 400px of space available in the header section. Your own 
template may provide less or more space for a custom logo image. 

Change the color scheme of your template 

Changing the color scheme of your new Blogger template is a simple yet effective method 
of personalization and branding. 


$ 


If you have a distinctive logo for your site, you may prefer to change the color 
scheme to match the colors of this logo. 


Using the fonts and colors menu 

Some Blogger templates are configured for colors to be changed through the fonts and 
colors menu. You can access this by going to Layout>Fonts and Colors when logged in to 
your blog's dashboard: 


r 




r t 

Posting 

Settings 

Layout | 


Page Element:; Fonts and Colors Edit HTML Pick New Template 


Choose a color for Page Background Color 
Colors from your blog More colors 



| | Page Background Color A 

Text Color 
Link Color 
HI Blog Title Color 


Colors that match your blog 


I □■■■■! 


Edit color hex code 

|#ffffff | 

Revert to template default 
Shuffle blog colors 


I I 


Figure 52: Changing colors through the Fonts and Colors menu 
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On this page, you can locate areas of your template whose colors can be altered in the left 
hand side of the menu. 

Then you can click on a color from the right hand side of the menu, or even choose your 
own hex colors by typing these into the box on the far right. 

You can preview these changes in the area beneath this menu, and click on the "Save 
Changes" button once you are happy with the changes you have made. 


Changing colors by editing your blog's HTML code 

Some Blogger templates require you to alter the color scheme manually, by editing the color 
values in the template's HTML code. 

This is not as simple as changing the color scheme through the Fonts and Colors menu. 
Rather than have a description of the area you need to change, you will need to locate the 
appropriate section in the HTML code of your template. 

How to change the hex values for colors in your blog template 

To change hex color values within the template's code, you need to go to Layout>Edit 
HTML in your blog's dashboard. It shouldn't be necessary to check the "expand widget 
templates" box. 

The hex values for each color in your template will be contained in the <b : skin> section of 
your template. 


Edit Template 


Edit the contents of your template. Learn more 


□ Expand Widget Templates 


body { 

background: $bgcolor; 

margin: 0; 

color : $textcolor ; 

f ont : x-small Georgia Serif; 

font-size/* */ : / *V small; 

font-size: /**/small; 

text-align: center; 

> 

a: link { 

color : $ linkcolor; 
text-decoration: underline; 

} 

a:visited { 

color : Svisitedlinkcolor ; 
text-decoration: underline; 

> 

a: hover < 

color : $titlecolor; 
text-decoration: none; 

> 


The style section of your 
'Blogger template code 
should loote like this 


V 


Revert widget templates to default 


CLEAR EDITS I PREVIEW I SAVE TEMPLATE 


Figure 53: Screenshot demonstrating the style section of a Blogger template's HTML code 

You will need to locate the unique style statement for each section of your template in order 
to change the color values for this area. 
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For example, the style for the header section is usually found in the statement beginning 
with #header, while sidebar titles may be in an area which begins . sidebar h2. 

In the <b : skin> section of your template, a statement for a background color will appear 
like this: 

background: #000000; 
or 

background-color: #ffff00; 

While the statement used to define a font color may appear like this: 

color: #000000; 

Or 

font-color: #ffcc00; 


The hex value in each of these examples is represented by the phrase which begins with a 
hash symbol, such as 

• #000000 (black) 

• #ffffff (white) 

• #ff0000 (red) 


Each hex value begins with a hash symbol (#) and is followed by a six digit code which is 
made up of numbers and the letters A-F. 



In Chapter 8, you can find color charts for the most commonly used hex values 
which help you find the hex values you need at a glance. 


You should change these hex values in your Blogger template to reflect the colors you 
prefer to use for your own design. Be sure that each hex value begins with the hash symbol 
and is followed by the correct six digit hexadecimal code. 


0 


Important Note: The style statements for sections of the template differ in name 
and syntax between different templates. If you are unsure of the section name you 
need to configure, take a look at your blog's source code and search for a 
recognizable phrase. When you look at the code surrounding your phrase, you 
should see the name or class of the section (e.g.: <div id="name-of-section"> or 
<div class="sidebar">). 
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Useful color scheme resources 

Here are some useful online resources which can help you find the perfect color scheme for 
your blog design: 

Adobe Kuler 


A flash based interface with options to publish and share your color schemes. 

ColorSchemer Gallery 

Includes thousands of pre-made color schemes, and a forum where you can ask advice 
about the best schemes for your design. 

Copaso 

This is my favourite online color scheme generator. It features a scratchpad where you can 
create and store your color schemes, and even a tool to extract colors from images. 

Add a background pattern/image to your blog 

A prominent trend of web design is to use an image or repeating pattern for the main 
background of the page. 

There are different methods you could use to add background images to your blog, 
depending on whether you require: 

• A repeating pattern 

• An image which repeats only horizontally or vertically 

• A static background image (which does not move when readers scroll down the 
page) 


These are the background styles we will refer to in this chapter. 


0 


To use any image as a background for your blog, you will need to upload this to 
an image host. 


Ensure you have the URLs of your background images to hand. You will need to 
use these when adding the relevant style code to your Blogger template. 
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<? 


Let's go through the different methods of adding background patterns and images to your 
Blogger template. 


You can use your free Picasa Web Albums account , which you are entitled to as 
a Google account holder. 

If you have registered an account with Picasa, a link to your account will be 
displayed in your Blogger dashboard (usually in the sidebar, or in the footer 
section of you are logged in through Blogger in Draft). 

If you have not yet registered a Picasa account, you can do so by visiting the 
Picasa home page . 


Add a repeating pattern to the background 

A repeating pattern is one which is repeated both horizontally and vertically across the 
whole background of the page. 

To achieve this affect, you will need to use a tileable image which creates a patterned 
effect. You can find hundreds of free tileable images from these sites: 

• Squidfingers 

• Repeat X-Y 

• Background City 


Once you have found your ideal tileable image, upload this to your preferred image host 
and note down the URL of your image. 

Now we need to edit the HTML code of your Blogger template to add this image as a 
repeating pattern to the background. 

Here are the steps you should take: 

1 . Go to Layout>Edit HTML in your Blogger dashboard. 

2. Locate the CSS statement for the "body" property in your template code. It should 
look something like this: 

body { 

background: $bgcolor; 

margin : 0 ; 

color : $textcolor ; 

font:x-small Arial, Sans-Serif;; 

font-size/* */ :/**/small; 

font-size: /**/small; 
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text-align: center; 
} 


3. We need to edit the line which I have highlighted in red. Please be aware that this 
may not look exactly the same in your own Blogger template! If you are unsure, look 
for the line in the "body" statement which begins with "background". This will be the 
line we need to change. 

4. You should replace the line in red with the following line instead, where (url-of-your- 
background-image) corresponds to the URL of your background image, where it is 
hosted with your image hosting provider: 

background: url (http: //url-of-your-background- image) ; 

5. Then preview your blog to see the effect this has on the appearance of your blog. 

6. If you are happy with this effect, you can proceed to save your template. 

Add a pattern which repeats across the top or side of 
your blog 

Sometimes you may prefer to add a pattern which repeats only across the top edge or side 
of your blog. 

The method for this is very similar to the one described above. But rather than allow 
the image to be repeated across the whole background, we add a statement after the URL 
of the background image which determines the direction of the repeat. 

To repeat the image horizontally across the top of the page, we use "repeat-x", like this: 

background: url (http: //url-of-your-background- image) repeat-x; 


To repeat the image vertically down the page, we use "repeat-y" like this: 

background: url (http: //url-of-your-background- image) repeat-y; 


Again, you should preview the changes you have made before saving your template. 

If you would also like to see a color in the portion of the page not covered by the pattern, 
you can add the appropriate hex value for your color before the URL of your image, like this: 

background: #ffcc00 url (http: / /url-of-your-background- image); 


Using a larger, static background image 

This method ads a larger background image which stays in place even when the reader 
scrolls down the page. The code required for this to work is quite different from the 
"shorthand" codes we have used for the previous repeating patterns. 

For a fixed background image, it is better to use a large image which covers most of the 
space available in a browser window. This style of image is often known as "wallpaper". 

Here are some useful resources for web-compatible background images: 

• Wallpaper Base 
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• Wallpaper Seek 

• Wonder Backgrounds 


As before, you will need to download you preferred background image, and host this with an 
image host before adding this property to your template. 

Properties required for a static background image 

To use a fixed background image, we need to define the following background properties 
separately, rather than as one statement: 

• background-color: The color of the background which is not covered by the image 

• background-image: The URL of the background image to be used 

• background-repeat: Whether the background should be repeated, and in which 
direction 

• background-position: The position in the page where you would like the image to 
appear. This can be top, middle or bottom for vertical alignment, and left, center or 
right for horizontal position. 

• background-attachment: This declares whether the background image should 
scroll with the page. Defining this as "fixed" ensures the background doesn't move 
with the page (the default is "scroll"). 


Here is an example of style code used to define all of these properties: 

background-color : #ffffcc; 

background- image : url (http : / /lh3 . ggpht . com/ amandafaz/RqC5MZ8V9aI/AAAAAAAAAMk/ 
bTAmjR2czl4/sl44/sunset. jpg) ; 

background- repeat : no-repeat; 

background-position: top center; 

background-attachment : fixed; 


This example code would add a fixed, non-repeating background image at the top of the 
page, with a yellow color where the image ends. 

Adding style code for a fixed background image to your template 

To add a static background image to the body of your Blogger template, you will need to 
replace the line for the background property with full declarations which should span a 
number of lines. 

The easiest way to achieve this is to use the example above as a template, substituting the 
values for the colors, image URL and alignment of your own preferences. 
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Be sure to replace only the background: $bgcolor (or similar) within the body 
section of your template! Removing other lines in the body section can affect the 
fonts and other styles of your template. 


To guide you, here are some "before and after" screenshots of how I added a fixed 
background image to the template code of a test blog. 


Edit Template 


Edit the contents of your template. Learn more 

D Expand Widget Templates 

/* Use this with templates/ temp late-twocol.html */ 


^background: S bacolor : Tlie *»«««. 

margin: 0; with regular baclegroui/vd properties 

color : Stextcolor ; 
font:x-small Georgia Serif; 
font-size/* */ :/**/small; 
font-size: /**/small; 
text-align: center; 

} 

a: link {| 

color : $ link c olor ; 
text-decoration: under line; 

) 


Figure 54: Before adding the new background properties 


Edit Template 


Edit the contents of your template. Learn more 


□ Expand Widget Templates 


/* Use this with templates/template-twocol.html */ 


body { 

background-color: #ffffcc; 
background- image: url (http : // lh3 , 
/bTAmjR2czl4/sl44/sunset. jpg) ; 
background-repeat: no-repeat; 
background-position: top center; 
background- attachment: fixed; 


ggpht.com/amandafaz/RqC5H28V9aI/AAAAAAAAAHk 


TrergilvilIJ 

color : Stextcolor; 
font:x-small Georgia Serif; 
font-size/* */ :/**/small; 
font-size: /**/small; 
text-align: center; 

> 

a: link { 

color :$ linkcolor; 
text-decorat ion : under 1 ine ; 

> 


t V ie Body settlor 
customized 
bflcle0round properties 
for a fixed b«cle0round l ru«0e 


Figure 55: After adding the code for a static background image: 
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Learn more about using backgrounds in your Blogger blog 

In this section, we have touched on the basic principles of applying background images to 
your Blogger template. 

Here are links to some useful tutorials from Blogger Buster which can help you learn more 
about applying backgrounds to areas of your Blogger template: 

• Styling sections of vour blog with borders and backgrounds 

• How to use background images 

• Add rounded corners and background color using CSS 

• Background styles for the Minima template 

? 


For more information about styling backgrounds, W3C schools provides a useful 
web backgrounds reference page with "Try It Editor" pages where you can 
experiment with different properties in action. 


Other useful customizations 

If you would like to take your customizations a step further, you may wish to take a look at 
some of these tutorials which can add extra functionality to your new Blogger template: 

Create a three column Blogger template 

This tutorial may be useful of your chosen design does not include a second sidebar 
Add extra widgets to vour blog header 

Many bloggers like to add extra widgets beside their blog header (such as a search box or 
navigation buttons). This tutorial offers an easy method to achieve this. 

A calendar widget to replace the date header 

Here you can learn how to replace a regular date header with a calendar icon. 

Segment the footer with three columns 

In this tutorial, you can learn how to divide a wide footer section into three widgetized 
columns. 

Chapter summary 

In this chapter, we have explored some basic methods of customizing your Blogger 
template, including: 

• How to add your logo to the header section 

• How to change the color scheme 
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• How to add background images to your design 


These methods are suitable for both third party and standard Blogger templates, and help 
assure you that your blog design is unique! 

Now that we have optimized the design of our Blogger template, let's take a look at 
methods of optimizing the code of our template for the benefit of readers and search engine 
spiders. 


63 



The Blogger Template Book 


Optimize your blog 



time 


So now you have a great new design for your blog; all the widgets you need are in 
place, and you've personalized your design with a unique logo and complementary 
color scheme. At this point, there are several tweaks you could apply which will make 
your template perform even better. . . 


I n this chapter, we will explore methods you could use to optimize your blog's page 
loading time. Not only will this be of benefit to your readers, it will also help search 
engines index your site more quickly. 


Tips to help your blog load more quickly 

Blog readers can be quite impatient. Ideally your blog pages should load within a few 
seconds through all connection types to prevent potential readers becoming impatient and 
moving onto another site instead. 


<? 


The aim of a fast-loading blog is to ensure your pages load in a reasonable time 
for all connection types. 


While you may think your blog loads quickly when viewed on your own computer, be aware 
that your visitors may be using different (and possibly slower) connections to access your 
pages. 

Those using dial-up will undoubtedly be used to slower page loading times than visitors who 
have DSL access. You should also consider that search engine spiders need to access 
your site and can index pages much more quickly when a site is optimized for speed. 


Find out how quickly your site loads 

One of the best tools I have found for understanding page loading time is Web 
Optimization's web page speed report . 

This tool is very easy to use: simply type your blog's home page URL into the text box, and 
hit the "Submit Query" button: 
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WebSiteOptimization.com 

Higher traffic and speed guaranteed. 1 " 





Home Sitemap Publications Services About Contact Newsletter: 

enter e-mail 

[ Join | 


home > services > analyze 

Web Page Analyzer - 0.964 - from Website Optimization 

Free Website Performance Tool and Web Page Speed Analysis 

Try our free web site speed test to improve website performance, Enter a URL below to calculate page size, composition, and 
download time, The script calculates the size of individual elements and sums up each type of web page component, Based on these 
page characteristics the script then offers advice on how to improve page load time, The script incorporates best practices from HC1 
research and web site optimization techniques into Its recommendations, 

Enter URL to diagnose; [ 

| Submit Queiy j 


About the Book 
About the Author 
Buy ^Amazon US 
Buy ^Amazon UK 
Table of Contents 



Figure 56: Query your blog's loading time with WebSiteOptimization.com 

It does take a few minutes to parse the information from your website, though once the 
page has loaded, you will see loads of useful information about your site. 

Now I admit that the information in this page can seem quite intimidating! This service is 
generally aimed at experienced webmasters who understand the technical details of HTTP 
requests, external objects and so on. The section we are most interested in is the "Analysis 
and Recommendations" which will look something like this: 


Analysis and Recommendations 

♦ n»)f :i?!11 - congratulations, the total number of HTML flies on this page (including the main HTML file) is 2 which most browsers can multithread. Minimizing 
HTTTrequestsis key for web site optimization. 

♦ - warning! The total number of objects on this page Is 66 - consider reducing this to a more reasonable number. Combine, refine, and optimize 
youjjjxternalobjects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests. 

♦ - Warning! The total number of Images on this page Is 41 , consider reducing this to a more reasonable number. Combine, refine, and optimize 
youraraphlcs, Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests. 

♦ ii«in««BS - Caution. The total number of external CSS files on this page is 5 , consider reducing this to a more reasonable number. Combine, refine, and 
optimizeyour external CSS files, Ideally you should have one (or even embed CSS for high-traffic pages) on your pages. 

♦ - Warning! The total size of this page is 1112674 bytes, which will load in 181.78 seconds on a 56Kbps modem. Consider reducing total page size to 
less than 30K to achieve sub eight second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. 
Consider cont acting us about our optimization services. 

♦ jBH3BH15i - Warning! The total number of external script files on this page is 17 , consider reducing this to a more reasonable number. Combine, refine, and 
optimizeyour external script files. Ideally you should have one (or even embed scripts for high-traffic pages) on your pages, 

♦ in.’. - Caution. The total size of this HTML file is 24997 bytes, which is above 20K but below 100K. With a 10K ad and a logo this means that your page will 

load in over 8,6 seconds, Consider optimizing your HTML and eliminating unnecessary features. To give your users feedback, consider layering your page or using 
positioninato display useful content within the first two seconds. 

» - Warning! The total size of your images is 323051 bytes, which is over 30K. Consider optimizing your images for size, combining them, and 

replacin^araphic rollovers with CSS. 

» M«iaiadriH= Warning! The total size of external your scripts Is 486443 bytes, which is over 8K. Consider optimizing your scripts for size, combining them, and 
usinqcompression where appropriate for any scripts placed in the HEAD of your documents. 

♦ Mtaafaula - Warning! The total size of your external CSS Is 11389 bytes, which is over 8K. Consider optimizing your CSS for size by eliminating whitespace, using 
shorthandnotation, and combining multiple CSS files where appropriate. 

♦ inwiagaMd - Congratulations, the total size of all your external multimedia files Is 0 bytes, which Is less than 4K. 


Figure 57: Analysis and recommendations for page loading time 


At a glance, we can see which areas of our blogs require some tweaking in order to load 
more quickly: 


The sections highlighted in are the areas of the site which have optimal 
performance, and do not need to be changed. 

The sections highlighted in are not critical, but could be optimized for better 

loading times. 

Those sections highlighted in E3 demonstrate areas which really slow down page 
loading time, and are top of the list for immediate optimization! 


If all of these sections display in green and yellow when using this tool, you have little to 
worry about in regard to your page loading time. However, if most of these sections are red, 
you are advised to make some changes to your blog, or potentially lose readers due to 
excessive loading times! 
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Ideally, we need to work towards a page loading time of under 8 seconds using a 56k dial- 
up connection (page loading times will be much faster for DSL and T1 connections). 

To achieve this optimal loading time, we need to fry to follow these guidelines: 

• The overall size of the page should not exceed 80kb 

• Use few external Java Scripts 

• Try not to display many images on each page, both in your posts and blog template 

• Aim for the smallest file size possible for your images 

• Reduce the size of your CSS (style) section wherever possible! 

• Make few HTTP requests (in other words, aim to have scripts, images and any other 
external elements on as few servers as you can!) 


This may seem like a lot of work, and if you are new to blogging or web design, it may also 
seem bewildering! 

Rather than focus on each factor in great technical detail, I'm going to suggest 6 useful 
methods you could use to reduce your blog loading time dramatically: 

1 . Remove any widgets/scripts you don't really need 

2. Reduce images in your layout 

3. Reduce the file size of your images 

4. Simplify your CSS 

5. Optimize the placement of scripts/widgets in your template 

6. Limit the number of posts displayed on your front page 


Remove any widgets/scripts you don't really need 

Unofficial Blogger widgets and Java Scripts can add some great interactive elements to 
your layout. Unfortunately, each different widget/script you use will need to be referenced 
from a different server (known as HTTP requests), and will slow down page loading time. 

Take a look at all of the widgets and scripts you use in your Blogger layout: 

• Do you really need to have each and every single widget? 

• Does each widget offer some value to your readers? 

• Would your readers really notice (and complain) if you removed a few of these 
widgets/scripts from your layout? 


If you answered "no" to these questions in regard to some of the scripts you use, you 
should consider removing them from your template altogether. 

I know that widgets can make your blog prettier, but consider the impact on your page 
loading time: you could be losing precious readers if these slow your page down! 


66 



The Blogger Template Book 


Reduce the number of images you use in your layout 

Loading externally hosted images is another high contribution to your page loading time. So 
if you use a lot of image-based buttons; feature many image widgets in your sidebar, or use 
a template which is heavily image based, try cutting down on these to see if this may help 
your blog load more quickly. 



Bonus Tip! 

If you really don't want to reduce the number of images you use in your template, 
you could host these with Blogger instead of an external image host. 

To do this, create a new blog post, and upload all of the images you would like to 
use to this post. These images will then be hosted on one of Blogger's image 
servers. 

Preview your post, and right click on each of these images. You should be able to 
copy the image location, which you can use to replace the image URLs in your 
template code. 

Using this trick reduces the number of HTTP requests for your images: all of 

the images you use will be hosted by Blogger, rather than a completely different 
host. This can have a dramatic impact on your page loading time, especially as 
Blogger's servers are hosted by Google (which in theory should be one of the 
most stable hosts in the world...) 


Reduce the file size of your images 

Another method of reducing the impact of images on page load time is to reduce the file 
size (not actual size) of all images used (whether in posts or layout). 

Many image manipulation programs allow you to optimize images for the web, which 
reduces the overall file size (in bytes and kilobytes) of the image. 

You may also like to try using an online image optimizer to reduce the size of your images. 
There may be some loss of quality (especially for larger images) but on the other hand, your 
overall page loading time will be reduced. 


Simplify your CSS 

The CSS section of your Blogger template takes up a lot of the overall file size of your blog 
pages. This is because each element of your <b : skin> (or < style> for those using 
classic Blogger templates) is featured on a separate line. There is a lot of unnecessary 
"white space" (page breaks, indentations and spaces) and possibly HTML comments. 

By eliminating unnecessary white space and HTML comments, you can reduce the overall 
size of your blog pages. However, doing this can make it difficult to edit the style section 
afterwards! 
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If you would like to improve page loading time by optimizing the style section of your 
Blogger template, here is the easiest method you could use: 

1 . Copy all of the code between the <b : skin> and </b : skin> tags in your blog's 
HTML code (for classic template users, this is the section between the <style> and 
</style> tags). 

2. In a new browser window or tab, visit the CSS Optimizer website , and paste your 
style code into the "direct input" box. 

3. Click the "Optimize" button (there is no need to check the box which says "do not 
remove line breaks"). 

4. The next page will offer your optimized style code inside a text box, along with data 
of how much this has been compressed. 


CSS Optimization completed at 0.06021 seconds 

File size before optimization: 23.83 KB 
File size after optimization :18.85 KB 
Saving: 20.92% 

You may save the optimized CSS file from this link 
Or you may copy the text below: 

body{ background: #000 a 

ur 1 (http : //bloggerbuster . com/ images/ grunge_bg. 

Helvetica sans-serif }body, #header-r ight 
ul, #header-r ight-bottom 

ul, #sidebar- wrapper , #sidebar- wrapper 2 , .sidebar 
ul, .sidebar 

li, . prof ile-data, #s_f ooter , .commentlist 

ul, #f eed-options ul,#navig ul,#magazine 

ul, .mybloglog ul li a, . captionfull 

img, . captionr ight img, . captionlef t v 

|jj| ju. I > 

5. Copy all of this code to your clipboard. 

6. Replace all of the existing code in your Blogger template (between the <b : skin> 
or <style> tags with this optimized code. 

7. Preview your template to ensure your template displays properly with these 
modifications, and finally save your template. 


Optimize the placement of scripts/widgets in your 
template 

There will undoubtedly be some externally hosted widgets and JavaScript's you would like 
to keep in your layout. To improve the impact these have on blog loading time, you can 
move these towards the bottom of your template code. 

Move slow loading widgets to your right-hand sidebar or the footer section of your 
blog. This will ensure that your blog content will appear before these scripts begin to load, 
so visitors can appreciate your posts while the page continues loading. 
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Reduce the number of posts which appear on your 
front page 

Each post which appears on your home page will add to the overall file size and loading 
time of your blog. 

Even if you only display summaries of your posts on the home page, the entire HTML code 
for your posts will be visible in the source code. This is because the post summary hack 
hides the main part of the post using the "display: none" tag. 

When choosing how many posts to display on the home page, you should consider the 
general length and style of your blog posts. 

• If you write around 5-600 words for each post, using few or small images (and 
infrequent multimedia), then 5-7 posts would be optimal to display on your home 
page. 

• If you write much longer posts; use many images, or video in posts, any more than 3 
or 4 posts would slow down the loading time of your blog. 

• On the other end of the scale, if your posts are generally short with few (if any) 
images, you could probably display 10 or more without affecting page load time. 


To change the number of posts which can be displayed on your blog's home page, go to 
Settings>Formatting while logged in to your Blogger dashboard. The first option enables 
you to choose how many posts are displayed on the front page: 



Show 


1 posts V 


If Days is selected, a limit of up to 500 posts will be enforced. 


Figure 58: Change the number of posts which appear on your front page 


By choosing to display less posts on your home page, you can ensure your blog will load 
more quickly. 


Have these changes improved your blog's loading 
time? 

Once you have made all these changes to your blog, you will probably notice a visual 
difference in your page loading time. You may also want to check exactly how much faster 
your site loads now by performing your speed check again with WebOptimization.com . 

Don't worry if you still see some red warnings after optimizing your site: it's almost 
impossible to perfectly optimize any form of blog! What we're hoping for here is an 
improvement of page loading time, and so long as you've made some improvements, you're 
on the right track. 
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Chapter Overview 

In this chapter, we have learned how to gather information about blog loading time, and 
methods which can be used to make pages load more quickly including: 

• Removing unnecessary widgets and Java Scripts 

• Optimizing images present in the template 

• Compressing CSS code 

• Reducing the number of posts displayed on the home page 


When considering how to reduce blog loading time, the main thing to consider is reducing 
the amount of code and files which are used in your blog's mark-up. 

Removing (or optimizing) as much unnecessary JavaScript and images as you are able; 
reducing the number of posts displayed on the main pages, and optimizing the style section 
of your blog's template code will certainly help your blog to load more quickly. 

This is beneficial for new visitors who may become impatient while waiting for large pages 
to load, and is also a key aspect of optimizing your blog for search engines (as spiders are 
able to crawl your content more quickly. 

In the next chapter, let's look at methods we could use to optimize our Blogger blogs for 
search engines by adding and modifying template tags to offer more information about the 
content of our blogs. 
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Optimize your template for search 
engines 


Search Engine Optimization (SEO) is the process of making a site relevant for search 
engines and searches. By making small changes to your Blogger template, you can 
help your site rank more highly in search engine results which naturally attracts more 
visitors to read what you have on offer. 

B logger templates are not naturally optimized for search engines. Alt and title tags are 
not present in the default mark-up of templates, but these tags can make all the 
difference to how well your site ranks in search engine results. 

In this chapter, we'll look at the ways your Blogger template may be improved for search 
engines, which will assist the ranking of your blog in major search engines. 

URLs, Title and Meta Tags 

These are often considered the three most important components of search engine 
optimization, and can be easily optimized for Blogger powered blogs. 


Your Blog's URL 

Whether you are posting on a Blog*Spot sub-domain (e.g.: yourblog.blogspot.com), or have 
chosen to use the custom domain feature (e.g.: www.yourblog.com), it is advantageous if 
the URL of your site reflects the nature of your blog. 

Choose your blog's URL wisely, and if possible ensure this contains a keyword or 
two which is relevant to your content. 

If you are writing about cats, for example, a URL such as "thedogsdinner.blogspot.com" will 
do you no favors with Google. This is because the URL contains no keywords relevant to 
your blog's subject matter. 

Instead, you could choose a URL like "thecatswhiskers.blogspot.com" or some other URL 
which includes keywords like "feline", "miaow" or other relevant words. 
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Make Optimal Use of Title Tags 

The <title> tag is a very important feature of any website, and is displayed most in 
search engine results. 

In Blogger templates, a title tag is generated for each page of your blog (including the main, 
archive and post pages), which differs depending on the actual title of the page. 

The title tag is called in your template like this: 

<titleXdata : blog . pageTitle/></ title> 


Your home page will only feature the actual title of your blog, whereas post pages will 
feature your blog title, plus the title of your blog post. 

When writing titles for your posts, you should bear this in mind to ensure your titles are 
keyword rich which will help your posts be indexed more easily by search engines. 

Try to place the most important keywords close to the beginning of the title, as many 
search engines limit the number of characters which are used in titles, both in their listings 
and in search results. 

The Blogger "Swap Title hack" 

One effective method of optimizing the post titles in your Blogger template is to apply the 
"swap title" hack. 



Make your titles 


File Edit View History Bookmarks Tools Help Related Links 

appear like this! 


<£• -ig 1 IjS 

0 http : //www . bloggerbuster . com/2008/02/optimize-your-blogger-template-For . html 


This customization ensures your post title appears first in the page title, instead of your 
blog's name. Using this method, search engine spiders are more likely to find relevant 
pages from your blog, and your pages may rank higher in search results. 

How to add the "Swap Title Hack" to your blog 

The "Swap title hack" is very easy to apply and can be achieved in just a few steps: 

1 . Go to Layout>edit HTML in your Blogger dashboard. 

2. Search for this tag: <data : blog . pageTitle/> 

3. Replace this tag with the following: 

<b:if cond=' data: blog. pageType == &quot; index&quot; '> 

<title><data : blog . title/x/ title> 

<b:else/> 

<titleXdata : blog . pageName/X/ title> 

</b:if> 

4. Save your template! (See, this is an easy hack!) 
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Once you've changed this tag, you'll see that on post pages, the default [blog name] page 
title format for your post titles in the browser window will be replaced solely by your post title 
instead. 


Meta Description and Keyword Tags 

Many SEO experts argue that meta description and keyword tags are being depreciated in 
search engine results. Google for example, generally ignores the meta description tag and 
generates its own description. 

However, many search engines do still make use of these tags so it can be useful to include 
them anyway. 

Meta description and keyword tags are not automatically generated for Blogger templates. 
Since we have full access to the HTML mark-up of our Blogger templates, we can add 
these manually below the title tags. 

One important consideration you should understand before adding meta description and 
keyword tags is that search engines look for different descriptions and keywords for 
each page of your site. If you simply add these to your template in the commonly accepted 
form, the same content will be distributed across all pages of your site, which search 
engines may well regard as spam. 

So here's the trick: only use these meta tags for your home (main) page! 

This is easily achieved by wrapping your meta description and keywords in conditional 
tags which will then only appear on your main page. 

For example, if I was writing a blog about cute cats, I could include meta description and 
keyword tags like this: 

<title><data : blog . pageTitle/></ title> 

<b:if cond= ' data : blog . pageType = "index" '> 

<meta content= ' Cute cats and fluffy kittens for feline friends.' 
name= ' description ' /> 

<meta content='cute, cat, kitten, fluffy, feline' name=' keywords ' /> 

</b:if> 


The parts highlighted in bold are those tags which prevent the data between them from 
being generated for the item and archive pages, so you can be sure not to spam search 
engines with repeated descriptions and keywords for your blog. 

The example above could be used as a basis for adding your own meta description and 
keywords, by simply changing the values to those which are better suited to your blog. 


Optimizing your blog's title heading 

Headings offer search engine spiders useful references about your content when indexing 
your site. You will probably be aware of the hierarchy of heading tags, which ranges from 
<H1> through to <H6>. Of these, the <H1> tag is considered the most important. In Blogger 
templates, the HI tag would usually contain the title of your blog. 
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Blogger allows us to upload an image to the header section, which can either be used as a 
background image, or instead of the regular title and description text. 

Those who choose to use an image instead of the title and description will not have the HI 
heading tag present in their template. So if your blog title uses keywords which would be 
relevant to search engine results, you would be missing out on an important factor of SEO! 

Luckily, this can be easily remedied! Provided you are using an image instead of the title 
and description in your template, you can add a few lines of code to insert hidden HI tags 
around your blog's header image. 

Adding HI tags to the header image for SEO 

Go to the Layout>Edit HTML section of your Blogger dashboard, and ensure you have 
checked the "Expand widget templates" box. 

Look for the styling code for the HI heading in the <b : skin> portion of your template. This 
may look something like this, though there are variations across different templates: 

#header hi { 

margin : 5px 2 Opx ; 

padding: 4 5px 2 Opx ,25em lOpx; 

line-height : 1 . 2em; 

text-trans form: uppercase; 

letter-spacing: . 2em; 

font: $pagetitlefont; 

} 

Within this portion of code, you need to add the following line: 

display: none; 

Here is how this could appear when added to the style declaration above: 

#header hi { 

margin : 5px 2 Opx ; 

padding: 4 5px 2 Opx ,25em lOpx; 

line-height : 1 . 2em; 

text-trans form: uppercase; 

letter- spacing: . 2em; 

font: $pagetitlefont; 

display: none; 

} 

Next, you will need to add the <h1> heading tags within the header widget. For this, you will 
need to locate the following section of code: 
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<b:if cond='data:useImage'> 

<b:if cond= ' data : imagePlacement == "REPLACE" ' > 

<!-Show just the image, no text-> 

<div id=' header-inner ' > 

<hl>Your Blog Title</hl><a expr: href =' data: blog. homepageUrl' style=' display: 
block' > 

<img expr : alt= ' data : title ' expr : height= ' data : height ' 

expr :id=' data: widget. instanceld + " headerimg" ' expr : src= ' data : sourceUrl ' 
expr :width=' data: width' style=' display: block '/> 

</a> 

</div> 

<b:else/> 


You'll notice that I've added the HI heading (highlighted in bold) where it should appear in 
the template code. As we have set the style of the HI heading to "display: none the HI 
heading is present in the HTML mark-up of your blog pages, but the title itself is not visible 
to the casual viewer. 

This technique ensures that your blog's title will still be indexed as effectively as if you had 
used the image as a background instead. Furthermore, by adding this HI heading 
manually, you could even expand on your title slightly with a short description which 
contains keywords relevant to your blog content. 


0 


If you use an image as the background to the title and description, or do not use 
an image in your header at all, you don't need to worry about this issue, as the HI 
heading will already be present in the mark-up of your pages! 


Allow search engines to find your blog! 

One important factor of optimizing your blog for search engines is to ensure spiders are 
able to index your blog! 

The easiest way to check this is to look in the settings of the Settings>Basic section of your 
Blogger dashboard. Close to the bottom of the page is an option to "Let search engines find 
your blog". You must set this to "Yes" if you want your site to be crawled and indexed by 
search engines. 

If you have mistakenly set this to "No", Blogger will add a "NOINDEX, NOFOLLOW" Meta 
tag to your blog mark-up, like this: 


<meta content= ' NOINDEX, NOFOLLOW ' name=' robots '/> 


Such a tag will prevent search engine spiders from ever indexing your site. 

This may seem obvious to most of you, though you'd be surprised how many people have 
not checked this setting! 
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Optimizing Links in your Blogger Template 

Before we get into the intricacies of optimizing links in Blogger templates, let's get back to 
basics! 

SEO experts universally agree that link text is one of the most important factors of 
optimizing a link. Link text is the word or phrase which is used as a link in text links, like this: 

<a href="#">This is Link Text</a> 

The easiest way to optimize text links is to ensure the value of the text link tells the regular 
reader (and also search engine spiders) a description of where the link will lead to. 

You can apply this technique to any manually created links in your blog, whether this is in 
your blog posts or links within your blog template (for example, links to important pages). 
Search engine spiders will reference the keywords contained in the link text more easily, 
while readers will prefer the experience of having a full description of where the links will 
lead to. 


Using titles in your links 

Links can be optimized even further by adding titles within the anchor tags, like this: 

<a href="#" title="This is title text">An example of link text</a> 

The "title" of an anchor link should be exactly that: a descriptive title which explains 
something about the link. Titles offer even more information about the link to search engine 
spiders. Furthermore, when a reader places their cursor over a link with a title in the anchor 
tag, the title will appear in a small box to provide a visual description. 

If you use this technique for all manually created links in your Blogger blog, both 
search engine spiders and regular readers will notice the difference too! 


Applying these techniques to your Blogger template 

These techniques are easy to apply to any manually created links in your blog template. But 
what about your blog title, link lists and labels which use code generated by Blogger specific 
tags? 

Even though such links are not generated by regular HTML anchor tags, there are methods 
we can use to optimize them by using keywords which are relevant to your blog, and by 
adding title tags. 

The methods you can use are slightly different, depending on the link you wish to optimize. 
So I'll go through the most prominent links you may wish to optimize in your own Blogger 
template with instructions on how these links can best be optimized for search engines and 
accessibility. 

Your Blog Title/Home Page Link 

In Blogger templates, your blog's title in the header section provides a link to your blog's 
home page. By default, this is displayed as a regular text link (featuring your blog title as the 
link text), though you can also opt to use an image instead of the blog title. 
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Your blog title is one of the most important factors of SEO. You need to ensure this is 
well optimized to enable your blog to rank highly for related keywords in search engine 
results. Whether you use regular link text as your blog title, or choose to use an image 
instead, you can still ensure this link is well optimized and adequate to your blog's SEO 
requirements. 

Optimizing the header widget 

The widget code for your blog header contains two distinct sections of code: one for 
instances where link text is used to display your blog title (and link to your home page), and 
one which generates the correct code for when an image is used instead. 

If you are using regular text to display your blog title, you'll discover that it's very easy 
to optimize this link. Simply go to Layout>Edit HTML in your Blogger dashboard, check the 
box to expand the widget templates, then locate the following section of code: 

< ! — No header image — > 

<div id= ' header-inner ' > 

<div class='titlewrapper'> 

<hl class=' title '> 

<b : include name= ' title ' /> 

</hl> 

</ div> 

<b : include name= ' description ' /> 

</div> 

</b: if> 

</b : includable> 

<b : includable id= ' title ' > 

<b:if cond=' data: blog. url == data: blog. homepageUrl ' > 

<data : title/> 

<b:else/> 

<a expr : href = ' data : blog . homepageUrl ' title="A Link Title 
Here" Xdata : title/X/a> 

</b:if> 

</b : includable> 


The text which I've highlighted in bold red is additional code which I have added to the 
template in order to give this link a title. 

You can optimize this title by using descriptive keywords which are relevant to your blog 
subject. For example, if you are writing a blog about blogs, and your blog title is "The Cat's 
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Whiskers", you could use a link title such as "The Pussy Cat Lover's Blog" to provide 
adequate reference for search engines and readers alike. 

If you are using an image instead of your blog title, you will need to locate a slightly 
different area of code and can optimize the link in two different ways: 

<b:if cond= ' data : uselmage ' > 

<b:if cond= ' data : imagePlacement == "REPLACE" '> 

<! — Show just the image, no text — > 

<div id= ' header-inner ' > 

<hl style="display : none;">Your Blog Title</h2> 

<a expr: href=' data: blog. homepageUrl ' style=' display: block' title="Link 
Title Here"> 

<img expr : alt= ' data : title ' expr : height= ' data : height ' 

expr :id=' data: widget. instanceld + " headerimg" ' expr : src= ' data : sourceUrl ' 
expr : width= ' data : width ' 

style=' display: block' /> 

</a> 

</div> 

You'll notice that I made two changes in the code above: the first is to add <hl> tags just 
before the link tags, which ensures there is a reference to a first class title within the blog 
template (when using an image instead of the textual title, this is omitted from the template 
code). 

By including the style reference, "display : none" this means that the HI tags are 
referenced by search engine spiders, while not being displayed in the visual make-up of the 
template. 

The second change is the same as the previous example, adding a link title inside the 
anchor tags, to ensure optimization for search engines and readers. As before, this also 
makes the link title appear when your cursor hovers over it. 

Optimizing Labels Lists 

In "new" Blogger layouts templates, you can add an optional "Labels" widget to your blog's 
sidebar. This widget lists all the labels you have used to categorize your blog posts. 

Since we do not have direct access to each label link in this list, you may imagine that it is 
impossible to add link titles to these links. Fortunately by adapting the code slightly, we can 
still add appropriate titles to these links! 

If you have added a label widget to your blog, you can look in your template code to find this 
section: 

<b:widget id='Labell' locked=' false' title=' Labels ' type= ' Label ' > 
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<b : includable id= ' main ' > 

<b:if cond= ' data : title ' > 

<h2Xdata:title/X/h2> 

</b: if> 

<div class='widget-content'> 

<ul> 

<b : loop values= ' data : labels ' var= ' label ' > 

<li> 

<b:if cond=' data: blog. url == data : label . url ' > 

<span expr : dir= ' data : blog . languageDirection ' > 

<data : label . name/> 

</ span> 

<b:else/> 

<a expr : dir= ' data : blog . languageDirection ' 
expr : href = ' data : label . ur 1 ' expr : title= ' "Read 

more posts filed under " + data : label . name ' rel= ' tag ' > 

<data : label . name/> 

</a> 

</b:if> 

<span dir= ' ltr ' > (<data : label . count/>) </ span> 

</li> 

</b:loop> 

</ul> 

<b: include name='quickedit'/> 

</div> 

</b : includable> 

</b:widget> 

As before, the code I added to make these labels more optimized for search engines is 
highlighted in bold red. 

You will notice that I have referenced the titles for each label link using this formula: 
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expr : title= ' "Read more posts filed under " + data : label . name ' 

As the link to each label link is generated by widget tags, we cannot add the code for each 
link title individually. Instead we need to use the section of the widget code which is used to 
generate the title as an expression, along with more descriptive link text. 

Furthermore, you will notice that I added "rel="tag" to the anchor link code. This is because 
Blogger labels can be used as tags which are referenced by Technorati and other sites to 
collect and collate information about a blog's content. 

Optimizing Link Lists 

Link lists can be optimized in a similar way. If you already have a link list present in your 
blog, simply find the expanded widget template for your link list widget which should look 
something like this: 

<b:widget id='LinkListl ' locked= ' false ' title=' ' type='LinkList'> 

<b : includable id= ' main ' > 


<b : if cond= ' data : title ' Xh2Xdata : title/x/h2x/b : if> 

<div class=' widget-content' > 

<ul> 

<b:loop values=' data: links' var='link'> 

<liXa expr : href = ' data : link . target ' 

expr : title= ' data : link . name ' Xdata : link . name/x/ax/li> 

</b : loop> 

</ ul> 

<b: include name='quickedit'/> 

</ div> 

</b : includable> 

</b:widget> 

Once again, I have added some extra code in red to show how the links in this list may be 
optimized with titles. 

If all of the links in a particular link list are those of friends' sites, you may also wish to add 
the tag rel="friend" to the anchor link code. Similarly, if all the links in this list reference your 
other sites or social profiles, you may prefer to add the rel="me" tag instead. Either of these 
tags may be added to the code like this: 

<liXa expr : href =' data: link. target' expr :title=' data: link. name' 
rel="friend" xdata : link, name/x/ aX/li> 
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These "rel" tags establish relationships between your blog and other sites, which is useful 
for those interested in the Social Graph API and for those who wish to link all their profiles 
using sites such as Ziki and OpenID . 

Optimizing Images in your Blogger Template 

Images may also be optimized for better visibility in search engines, and also as a 
mechanism for adding extra keywords to your content. 


How Search Engines See Images in Your Site 

Search engine spiders can only see the textual elements of your site; images are virtually 
invisible to them, unless you use ALT and TITLE tags to add unseen detail which can be 
read (and understood) by search engines. 

Alt (Alternative Text) Tags 

ALT tags are of particular importance in optimizing images in your blog, as these specify 
"alternative text": a description of the image which would appear if images are disabled in 
the reader's browser and provide accessibility information for disabled readers. Many 
search engines view alternative text for images as an important aspect of the mark-up in 
web pages, and the strength of your site may be penalized if many images do not have ALT 
tags in place! 

Alternative text appears within the image tags, like this: 

<img src="images/example . jpg" alt="An Example of an Image" /> 


Title Tags 

TITLE tags give the image a title, providing information of what the image is about. This will 
be displayed if you hover your cursor over the image. 

Title tags also appear within image tags, and are constructed as follows: 

<img src="images/example . jpg" alt="An Example of an Image" title="Title of 
Image" /> 

Both of these tags are considered essential elements in the <img> tags of websites, so it is 
important that you optimize your Blogger powered blog to reflect this. 


Optimizing Images in your Blogger Template 

The most important (and often overlooked) image in your blog template is the header image 
or logo. 

If you use a header image in place of the title and description for your Blogger blog, the 
default template tags provide the title of your blog as the "alternative text" like this: 

<img expr : alt= ' data : title ' expr : height= ' data : height ' 
expr:id= 'data: widget. instanceld + " headerimg" ' 
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expr : src= ' data : sourceUr 1 ' expr : width= ' data : width ' 
style=' display: block' /> 

You can find this section of code by checking the "expand widget templates" box as this is 
contained within the widget which displays your blog header. 

Unfortunately, Blogger does not automatically provide a title for the header image. 

Luckily, it is very easy to add a title to the image tags, simply by adding the required code: 

<img expr : alt= ' data : title ' expr :height=' data: height' 
expr :id=' data: widget. instanceld + " headerimg" ' 
expr : src= ' data : sourceUr 1 ' expr : width= ' data : width ' 
style=' display: block' title='The Title of your Image' /> 

If you have manually added any other images to your Blogger template, you should also 
add title and alternative text for these images. You can find image tags in your template 
easily by using your browser's search function and searching for img. 

Adding ALT and TITLE Tags to Images Contained in 
Widgets 

Many Bloggers choose to add images to their sidebar using a "Picture" widget. Again 
Blogger adds "alternative text" to your image which is generated by the title of the widget 
itself. 

It is possible to add a title to the image, and also change the alternative text (if you prefer). 

The following section of code is an example of how a picture widget would appear in your 
Blogger template: 

<b: widget id='Imagel' locked=' false' title='My Picture' type= ' Image ' > 

<b : includable id= ' main ' > 

<b:if cond= ' data : title != "'"> 

<h2xdata : title/X/h2> 

</b:if> 

<div class=' widget-content '> 

<img expr : alt= ' data : title ' 
expr : height= ' data : height ' 
expr : id= ' data : widget . instanceld + " img" ' 
expr : src= ' data : sourceUrl ' 

expr : width= ' data : width ' title='Your Image Title' /> 
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<br/> 

<b:if cond= ' data : caption != 

<span class= ' caption ' xdata : caption/></ span> 

</b : if> 

</div> 

<b: include name='quickedit'/> 

</b : includable> 

</b:widget> 

I have added a title to the image, which is highlighted in red. 

Changing the alternative text for the image is a little different. You will need to change the 
following section in the widget code: 

img expr : alt= ' data : title ' 

To say something like this instead: 

img alt= ' Alternative Text of your Image ' 

This replaces the default alternative text with that which you have specified. 

If you add an image in an HTML/JavaScript widget, or as part of a Text widget you can add 
ALT and TITLE text manually inside the image tags without having to edit your template 
code. Simply open up the editor for your widget (either in the Layout>Page Elements 
section of your dashboard, or by clicking the wrench icon displayed in a blog page) and add 
the relevant code to the HTML mark up of your widget. 

Optimizing Images in Blog Posts 

Like most Bloggers, I upload images to my posts using the image upload button. This adds 
the correct code to my blog post without having to code the whole thing by hand! 

But Blogger does not optimize the image tags! 

When you use the image upload feature, ALT text is added to the image tags, but nothing is 
contained inside it so it may as well be blank! 

You can see this at work in the following example where the m i ss i ng alternative text is 
highlighted in red: 

<a onblur="try { parent. deselectBloggerlmageGracefully () ; } catch (e) {}" 
href="http : / /bp3 .blogger . com/ [ . . . ] /A_Picture . jpg"> 

<img style="float : right; margin:0 0 lOpx 10px;cursor:pointer; cursor :hand; " 
src="http : / /bp3 .blogger . com/ [ . . . ] /A_J?icture . jpg" 

border="0" alt="" id="BLOGGER PHOTO ID 5175851698930009362" /></a> 
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While it wont do any harm to have no value to the alternative text (that is, to define alt=""), it 
won't do your blog any favors either! 

The best way to remedy this is to add your own alternative text between the two 
speech marks, which will be displayed for visitors who block images or use text-based 
browsers to read your site. 

As in all of these examples, you can add title text to the image tags in your blog posts too, 
simply by adding the appropriate code. 

After optimizing the example above, the code would appear like this: 

<a onblur="try { parent. deselectBloggerlmageGracefully () ; } catch (e) {}" 
href="http : / /bp3 .blogger . com/ [ . . . ] /A_Picture . jpg"> 

<img style="float : right; margin:0 0 lOpx 10px;cursor:pointer; cursor :hand; " 
src="http : / /bp3 .blogger . com/ [ . . . ] /A_Picture . jpg" 

border="0" alt="A Picture" id="BLOGGER_PHOTO_ID_5175851698930009362" 

title="The Image Title" /></a> 


Chapter Overview 

In this chapter, we have learned about methods you can use to optimize your Blogger 
template for better ranking in search results, including: 

• Optimizing URLs, title and Meta tags 

• Ensuring links are search engine friendly 

• Adding Alt and Title tags to images 


Using the techniques outlined in this chapter should help your blog rank more highly in 
search engine results for keywords related to your posts. 

Rather than spam search engines with keywords which are not relevant to your content, 
focus on a few specific keywords that you think people will search for to find the information 
contained in your posts. 

This will help new readers discover your blog posts, and may also help improve your 
Google Page Rank overtime. 

In the final chapter of this eBook, we will look at Blogger template resources which will offer 
useful advice and inspiration for your unique blog designs. 
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Blogger Template Resources 


In this chapter, you will find links to useful online resources for all your template needs! 


Free Blogger template providers 

These sites offer free Blogger XML templates for you to download. 


BTemplates 

This is the ultimate directory of Blogger XML templates. At the time of writing this post, 
BTemplates features over 200 free Blogger XML layouts for free download, contributed by 
many different designers from the Blogger community. 

Templates are organized by theme, style and also by tags which makes it very easy to 
search for the style of template you prefer. 

Blogger Templates 

One of the oldest and best known Blogger template resources, which also features useful 
customization articles for Blogger. 

Templates are organized by category, and there is also a search function to help narrow 
down your preferences. 

Blog and Web 

Blog and Web provide an excellent array of Blogger templates which have been converted 
from popular Wordpress designs. 

This site is written in Spanish, though you can easily translate the page you are reading 
using Babelfish Translator if you need to. 

Blogging Tips 

Features a wide range of free Blogger templates and Wordpress conversions. 
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Zona Cerebral 

Zona Cerebral features some of the most beautiful free Blogger templates I have ever seen. 
This site is also written in Spanish and can be translated quickly using AltaVista's Babelfish 
translator if necessary. 


Jackbook 

Jackbook provides a range of Blogger templates which have been converted from existing 
Wordpress templates. 


Blog Crowds 

A wide variety of well-designed Blogger XML templates are available on this useful blog 
resource site. 


Final Sense 

Final Sense probably has the largest collection of Blogger templates available. 


K2 Modify 

Some excellent designs to be found on this Blogger hosted resource site. The template 
used by K2 Modify is available for download, which is probably one of the best this site has 
to offer. 


Suck Mv Lolly 

Some beautiful, quirky and feminine designs are to be found on this site. Many include 
customizable header images so you can add your own blog title to the design. 

Gisele Jaauenod 

Gisele's designs are beautiful, feminine and unique! 

GosuBlogger 

GosuBlogger converts and creates Blogger XML templates. Be sure to visit to see some 
truly unique designs. 

BlogU 

Annie has created some beautiful Blogger templates for free download. Here you will also 
find some very useful articles about blogging with Google Blogger. 

Aborregate 

Here you can find some beautiful and unique Blogger templates of all design styles. 
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Free Blogger Skins 

A collection of free Blogger XML skins which are easily viewable on the home page. 

Fresh Blogger Templates 

A great selection of Wordpress conversions, many of which can be seen on the front page 
of this site. 


e-Blog Templates 

A directory including more than 130 free Blogger templates available to download. 

Gecko and Fly 

Fans of Gecko and Fly's Classic Blogger templates have converted these to XML format 
which you can download from this site. 


Our Blogger Templates 

A range of Blogger XML templates in different colors and styles (formerly 
Dzelque.blogspot.com) 


Free XML Blogger Templates 

Template-Godown's site features both original and Wordpress conversions for Blogger XML 
users. This site is updated regularly with new templates for you to download. 


Blogger Templates 

FriedClyde's site includes collections of beautiful Blogger designs from many different 
sources. 


Blogger Template Collections 

Here you can find articles which showcase free Blogger template downloads: 
101 excellent Blogger XML templates 

50 more beautiful Blogger templates 

70 fresh and modern Blogger templates 

40 Best Two Column Blogger Templates 

10 Unique Blogger templates 
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Blog Design Showcases 

Find inspiration for your own customizations and Blogger template designs by taking a look 
at these design showcases. 

Showcasing Blogger Designs 

• 50 more fabulous Blogger designs to inspire you 

• 54 unique and inspiring Blogger templates 

Showcasing Blog Designs in General 

• 45 Excellent Bios Designs (Smashing Magazine) 

• 45 More Excellent Blog Designs (Smashing Magazine) 

• We Love WP (Showcasing Wordpress blog designs) 

• 60+ Unusual Blog Designs (Noupe) 

Inspirational Design Resources 

• CSS Beauty 

• Best Web Gallery 

• CSS Mania 

• Web Creme 

• CSS Elite 

• Design Shack 

• Inspiration Folder 

Useful Cheat Sheets 

Here is a selection of links to printable “cheat sheets” which you can reference for 
assistance when customizing your Blogger template design: 

• CSS Cheat Sheet 

• HTML Cheat Sheets 

• CEDesign (A simple vet excellent resource!) 
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HTML color codes 

Here are charts of the most commonly used Hex color codes for reference when changing 
your blog's color scheme: 
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000033 

000066 

000099 

OOOOCC 

0000FF 

003300 

003333 

003366 

003399 

0033 CC 

0033 FF 

006600 

006633 

006666 

006699 

0066 CC 

0066 FF 

009900 

009933 

009966 

009999 

0099 CC 

0099FF 

OOCCOO 

00CC33 

00CC66 

00CC99 

OOCCCC 

OOCCFF 

00FF00 

00FF33 

00FF66 

00FF99 

OOFFCC 

OOFFFF 

330000 

330033 

330066 

330099 

3300 CC 

3300 FF 

333300 


333366 

333399 

3333 CC 

3333 FF 

336600 

336633 

336666 

336699 

3366 CC 

3366 FF 

339900 

339933 

339966 

339999 

3399 CC 

3399 FF 

33 C COO 

33CC33 

33CC66 

33CC99 

33CCCC 

33CCFF 

33FF00 

33FF33 

33FF66 

33FF99 

33FFCC 

33FFFF 

660000 

660033 

660066 

660099 

6600 CC 

6600 FF 

663300 

663333 

663366 

663399 

6633 CC 

6633 FF 

666600 

666633 

666666 

666699 

6666 CC 

6666 FF 
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666600 

666633 

666666 

666699 

6666 CC 

6666 FF 

669900 

669933 

669966 

669999 

6699 CC 

6699 FF 

66 C COO 

66CC33 

66CC66 

66CC99 

66CCCC 

66CCFF 

66FF00 

66FF33 

66FF66 

66FF99 

66FFCC 

66FFFF 

990000 

990033 

990066 

990099 

9900CC 

9900 FF 

993300 

993333 

993366 

993399 

9933 CC 

9933 FF 

996600 

996633 

996666 

996699 

9966 CC 

9966 FF 

999900 

999933 

999966 

999999 

9999 CC 

9999 FF 

99 C COO 

99CC33 

99CC66 

99CC99 

99CCCC 

99CCFF 

99FF00 

99FF33 

99FF66 

99FF99 

99FFCC 

99FFFF 

ccoooo 

CC0033 

CC0066 

CC0099 

CCOOCC 

CCOOFF 

CC3300 

CC3333 

CC3366 

CC3399 

CC33CC 

CC33FF 

CC6600 

CC6633 

CC6666 

CC6699 

CC66CC 

CC66FF 

CC9900 

CC9933 

CC9966 

CC9999 

CC99CC 

CC99FF 
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ccccoo 

CCCC33 

CCCC66 

CCCC99 

cccccc 

CCCCFF 

CCFFOO 

CCFF33 

CCFF66 

CCFF99 

CCFFCC 

CCFFFF 

FF0000 

FF0033 

FF0066 

FF0099 

FFOOCC 

FFOOFF 

FF3300 

FF3333 

FF3366 

FF3399 

FF33CC 

FF33FF 

FF6600 

FF6633 

FF6666 

FF6699 

FF66CC 

FF66FF 

FF9900 

FF9933 

FF9966 

FF9999 

FF99CC 

FF99FF 

FFCCOO 

FFCC33 

FFCC66 

FFCC99 

FFCCCC 

FFCCFF 

FFFFOO 

FFFF33 

FFFF66 

FFFF99 

FFFFCC 

FFFFFF 
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Glossary 


AdSense: Google's marketing program which allows web publishers to earn a revenue 
stream from their websites and blogs. 

See https://www.google.com/adsense/ for more information and to sign up for your free 
AdSense publisher account. 

ALT Text: ALT text (Alternative Text) is used in web pages to provide alternative text where 
an image cannot be displayed. 

Anchor Link see Hyperlink 

Anti-Layout: A style of layout which breaks the normal conventions of blog design. Usually 
includes multiple columns and a different layout style for the home page. 

Classic Blogger Templates: This style of template is HTML based, whereas New Blogger 
Templates (see below) are coded using XML. It is not possible to use widgets in Classic 
Blogger templates, and the tags used to parse and display content are vastly different. 

Copy and Paste: To copy text (or files) from one document to another. 

CSS (Cascading Style Sheets): CSS stands for Cascading Style Sheets. Styles define 
how to display HTML elements. 

In Blogger, CSS is usually embedded in the head section of the blog template. 

See also External CSS 

Default Templates: This refers to the selection of templates available directly through 
Blogger. There are currently 27 default templates on offer in a range of styles and colors. 

<div>: A <d±v> is a block level HTML element which can be used to add structure or 
group a section of content. 

Blogger templates make extensive use of <div> sections to define the header, main post 
area, sidebar, footer and other elements of the layout. 

Error Codes: Sometimes you may receive an error code or message when editing your 
Blogger template. These error codes usually begin with bX- followed by an alphanumeric 
string. 

Footer: This is the section right at the bottom of the blog layout. Often bloggers place 
copyright notices or links to important blog pages. 
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Hex Color Codes: Web colors are usually defined using Hex color codes. Hex, short for 
hexadecimal, is a base 16 numbering system, which mixes letters and numbers (0-9 then A- 
F), so that a three digit number (in this case numbers between 0 and 255) can be 
expressed as a two digit number. Hex values can be used to represent the RGB values of 
colors. These numbers appear as 6 digit (or 6 place) values, with each 2 digits representing 
the Red, Green, or Blue values. 

Headings: In web pages, headings are defined using heading tags. These range from <h1> 
(largest) to <h6> (smallest) in order of authority. 

Home Page: The "index" page of your blog; this is the first page visitors will see when 
typing your blog's URL into the web browser. 

Hosting: The service of hosting a site on the Internet making it viewable for other users on 
the Internet. 

HTML: HyperText Markup Language is the most common computer language used to 
create hypertext documents (web pages). It provides a means to describe the structure of 
text-based information in a document — by denoting certain text as links, headings, 
paragraphs, lists, and so on — and to supplement that text with interactive forms, 
embedded images, and other objects. HTML is written in the form of tags, surrounded by 
angle brackets. 

HTTP Request: Web pages may contain content which is hosted on different servers. Each 
piece of content referenced in the mark-up of that page creates an HTTP Request to the 
URL referenced in the code. 

Hyperlink: The text you find on a Web site which can be "clicked on" with a mouse. This in 
turn will take you to another Web page or a different area of the same Web page. 

JavaScript: A client-side script language that can be embedded into HTML pages to create 
interactive elements. Many widgets available for Blogger use JavaScript to add interactive 
elements to your blog's design. 

Layout: The overall structure of your blog's design which may include the header, sidebar, 
posts and footer section. 

Layout Tags: These are HTML based tags which are present in the Blogger template. 
These tags are used to process content and display it in published blog pages. 

Lorem Ipsum: A Latin-based fake placeholder text used in printing and website design in 
place of English in order to emphasise design elements over content. 

Meta Tags: Tags inserted into documents to describe the document. These are used to 
identify the pages by both browsers and search engines, and are not visible in the design of 
the web page. 

New Blogger: Refers to the revised Blogger platform and XML based templates. New 
Blogger templates are coded in XML (as opposed to basic HTML) and feature drag and 
drop layouts so widgets can be moved dynamically. 

Niche Blogs: Blogs whose content is focused on a specific subject. Blogger Buster, for 
example, is a niche blog about using the Google Blogger platform. 
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PageRank: A score from 0-10 that represents how popular a web page is based on 
Google's link analysis calculations. 

Post: An individual blog entry. 

Post Page: A single page used to display an individual blog entry. 

SEO: Search Engine Optimization is the practice of designing web pages so that they rank 
as high as possible in search results from search engines. 

Search Engine Spiders: Spiders or crawlers are actually software that is sent out by the 
search engine to find all of the content in the site, following html text links, and gather 
information for the search engine database. 

Sidebar: The area of a blog (or webpage) which appears to the side of the main content 
area. In Blogger templates, the sidebar usually contains widgets and other extraneous 
content. 

Style Sheet: A web document containing style definitions (CSS). 

Technorati: An Internet search engine which tracks blogs and ranks them according to the 
number of inbound links. See http://www.technorati.com . 

Third Party Templates: These are blog templates which are not provided by default by 
Blogger. Instead, these templates are created by non-affiliated blog template designers. 

Title Tags: These HTML tags are placed in the <head> section of web pages (and blog 
templates) and are used to define the title of the page as it appears in the web browser. 

Widgets: Dynamic scripts or content sections which can be moved around the blog layout 
using drag and drop functions. 

Widget Tags: HTML tags specifically used for widgets within the Blogger template mark-up 
code. 

XML: Short for extensible Markup Language. Widely used system for data format which 
allows designers/developers to create their own customized tags. Blogger templates are 
composed of XML code. 
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